--- title: "Menu" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Menu for navigation lists, sidebars, and dropdowns. Icons, active states, and nested submenus—fully accessible without JavaScript." url: https://frutjam.com/fr/components/menu --- # Menu Component Les composants de menu affichent des listes organisées d'actions ou d'options de navigation. Construit avec des listes HTML sémantiques et des éléments de lien, le système de menus Frutjam prend en charge les dispositions verticales et horizontales, les menus imbriqués, les icônes et les états actifs. Entièrement accessibles grâce à la navigation au clavier, les menus s'intègrent parfaitement aux listes déroulantes, aux barres latérales et aux modèles de navigation contextuels. CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile. | Classe | Taper | Description | | --------------- | ------------ | ------------------------------------------------------ | | menu | Base | Liste verticale des éléments de navigation ou d'action | | menu-item | Modificateur | Élément cliquable individuel dans le menu | | menu-title | Modificateur | Étiquette de section non interactive | | menu-horizontal | Modificateur | Disposition horizontale | | menu-vertical | Modificateur | Disposition verticale (par défaut) | | menu-active | Modificateur | Force l'état actif/mis en surbrillance sur un élément | | menu-disabled | Modificateur | Apparence désactivée pour un élément de menu | | menu-xs | Taille | Très petit | | menu-sm | Taille | Petit | | menu-md | Taille | Moyen (par défaut) | | menu-lg | Taille | Grand | | menu-xl | Taille | Très grand | ## Utilisation de base ## Menu horizontal ```html ``` ## Menu vertical ```html ``` ## Menu avec icône et texte ```html ``` ## Menu réactif : vertical sur petit écran, horizontal sur grand écran ```html ``` ## Tailles des menus ```html ``` ## Menu avec titre ```html ``` ## Menu avec ligne verticale avec titre en tant que parent ```html ``` ## Menu avec éléments désactivés ```html ``` ## Menu avec élément actif ```html ``` ## Menu avec sous-menu ```html ``` ## Menu avec sous-menu pliable ```html ``` ## Menu vertical avec icône uniquement ```html ``` ## Menu horizontal avec icône uniquement ```html ``` ## Menu avec icône uniquement avec info-bulle ```html ``` ## Menu avec icône uniquement (horizontal) avec info-bulle ```html ``` ## Menu avec icônes et badge (responsive) ```html ``` ## Arborescence des fichiers ```html ``` ## Sous-menu horizontal ```html ``` ## Méga menu avec sous-menu (responsive) ```html ``` ## Pliable avec sous-menu (responsive) ```html ```