Article original : How to Make a Dropdown Menu with shadcn/ui
Les menus déroulants sont de petits menus contextuels qui vous aident à afficher plus d'options sans encombrer votre écran. Ils sont très utiles dans les sites web et les applications.
Dans ce guide, vous apprendrez à créer un menu déroulant en utilisant shadcn/ui. C'est un outil qui fonctionne bien avec Tailwind CSS et Radix UI pour vous aider à créer des menus esthétiques et faciles à utiliser.
Table des matières
Créons un menu déroulant étape par étape
Cas d'utilisation réel : Menu déroulant de pays avec drapeaux
4E1 Prérequis
Avant de commencer, assurez-vous d'avoir :
Des connaissances de base en React et JavaScript
Node.js et un gestionnaire de paquets comme npm, pnpm ou yarn installés
Une familiarité avec Tailwind CSS est un plus, mais pas obligatoire
Nous allons tout passer en revue étape par étape, donc ne vous inquiétez pas si vous n'êtes pas encore un expert.
Qu'est-ce que shadcn/ui ?
shadcn/ui est un ensemble d'outils (appelés composants) qui vous aident à construire des parties d'un site web, comme des boutons, des modales et des menus déroulants. Il est construit avec Radix UI et stylisé avec Tailwind CSS. Il est parfait si vous utilisez React ou Next.js.
Avec shadcn/ui, vous n'obtenez pas seulement des composants stylisés, vous avez un contrôle total sur le fonctionnement et l'apparence de tout. Cela le rend parfait pour les équipes qui veulent une cohérence dans la conception sans sacrifier la flexibilité.
Pourquoi utiliser shadcn/ui pour les menus déroulants ?
Les menus déroulants sont un excellent cas d'utilisation pour shadcn/ui car :
Il est facile à utiliser avec le clavier et les lecteurs d'écran
Vous pouvez créer des apparences personnalisées en utilisant Tailwind CSS
Vous contrôlez son fonctionnement et son apparence
Il fonctionne parfaitement dans les sites web et les applications réels
Il s'intègre bien avec les workflows React modernes
Créons un menu déroulant étape par étape
Étape 1 : Démarrer un nouveau projet avec shadcn/ui
Vous n'avez pas besoin de configurer React, Next.js ou Tailwind manuellement. Exécutez simplement cette commande :
pnpm dlx shadcn@latest init
Cela créera automatiquement une nouvelle application Next.js avec Tailwind CSS et shadcn/ui préconfigurés.
Astuce : Vous pouvez également utiliser npx au lieu de pnpm dlx si vous préférez :
npx shadcn@latest init
Étape 2 : Ajouter le composant de menu déroulant
Après que votre projet soit prêt, ajoutez le composant de menu déroulant en utilisant :
npx shadcn@latest add dropdown-menu
Cela importera tous les composants nécessaires pour créer un menu déroulant.
Étape 3 : Importer ce dont vous avez besoin
Dans votre fichier React, importez le module complet de menu déroulant pour pouvoir accéder à toutes ses fonctionnalités :
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"
Étape 4 : Construire un menu déroulant simple
Voici un exemple de menu déroulant de base :
export function ProfileMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="px-4 py-2 bg-primary text-white rounded">
Ouvrir le menu
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>Mon compte</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profil</DropdownMenuItem>
<DropdownMenuItem>Paramètres</DropdownMenuItem>
<DropdownMenuItem>Déconnexion</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
Ce n'est qu'un début. Vous pouvez ajouter des groupes, des sous-menus et des raccourcis clavier pour les utilisateurs avancés.
Étape 5 : Améliorer son apparence
Utilisez Tailwind CSS pour styliser votre menu déroulant et ajouter des effets de survol comme ceci :
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="px-3 py-1.5 bg-primary text-white text-sm font-medium rounded-md hover:bg-primary/90 transition-colors">
Ouvrir le menu
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52 border-gray-200 shadow-lg rounded-md space-y-0.5">
<DropdownMenuLabel className="text-xs text-gray-500">
Mon compte
</DropdownMenuLabel>
<DropdownMenuSeparator className="border-t border-gray-100" />
<DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
Profil
</DropdownMenuItem>
<DropdownMenuItem className="px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md cursor-pointer transition-colors">
Paramètres
</DropdownMenuItem>
<DropdownMenuItem className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-md cursor-pointer transition-colors">
Étape 6 : Le rendre compatible avec tous les écrans
Vous voulez que votre menu déroulant soit réactif ? Utilisez les classes réactives de Tailwind :
<DropdownMenuContent className="w-full md:w-64">
Vous pouvez également positionner dynamiquement le menu déroulant en utilisant le support de portail intégré de Radix.
Étape 7 : Ajouter des icônes sympas
Installez les icônes Lucide :
npm install lucide-react
Puis utilisez-les dans votre menu :
import { User, Settings, LogOut } from "lucide-react"
<DropdownMenuItem>
<User className="mr-2 h-4 w-4" /> Profil
</DropdownMenuItem>
Les icônes aident les utilisateurs à parcourir rapidement les options, ce qui est une excellente touche pour l'UX.
Étape 8 : Il est déjà accessible !
shadcn/ui (grâce à Radix UI) rend votre menu déroulant :
Compatible avec le clavier
Prêt pour les lecteurs d'écran
Conforme aux meilleures pratiques du web
Vous n'avez pas besoin de configurer l'accessibilité, cela fonctionne simplement :)
Cas d'utilisation réel : Menu déroulant de pays avec drapeaux
Vous cherchez un menu déroulant plus avancé ? Voici un exemple incroyable qui inclut la recherche, les icônes de drapeaux et le regroupement :
449 shadcn-country-dropdown.vercel.app
C'est open-source et un excellent endroit pour voir ce qui est possible avec shadcn/ui.
Réflexions finales
Utiliser shadcn/ui pour créer un menu déroulant est rapide, simple et puissant. Vous obtenez un excellent style, une accessibilité et un contrôle total sur l'apparence et le fonctionnement des choses. Que vous débutiez ou que vous construisiez pour la production, c'est un outil solide à utiliser.
Les menus déroulants ne sont qu'un début. shadcn/ui offre une bibliothèque complète de composants headless pour construire des interfaces utilisateur modernes.
J'espère que vous avez trouvé cet article utile ! Si vous construisez un produit SaaS ou une application web qui implique une interaction utilisateur ou une conversion, envisagez d'améliorer la confiance des utilisateurs avec des notifications en temps réel comme des pop-ups modales, sales pop up, etc.