Skip to main content
View as Markdown

Composants de navigation

Les composants de navigation déplacent les utilisateurs : menus de premier niveau, menus déroulants et contextuels, fils d'Ariane, panneaux d'onglets, contrôles de pagination et contrôles groupés de bascule/bouton. Les éléments de menu et de fil d'Ariane suivent des schémas partagés (MenuItemSchema, NavItemSchema, BreadcrumbItemSchema). Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

components:
  - type: navigation-menu
    items:
      - { label: Home, href: / }
      - label: Products
        children:
          - { label: Catalog, href: /catalog, description: 'Browse everything' }
  - type: breadcrumb
    items:
      - { label: Home, href: / }
      - { label: Contacts }

Une barre de navigation de premier niveau prenant en charge les éléments imbriqués et les dispositions de méga-menu.

Propriété Description
items Tableau d'éléments de navigation (voir ci-dessous).
props Attributs HTML (p. ex. className).

Chaque élément de navigation (NavItemSchema) :

Propriété d'élément Description
label Texte d'affichage de l'élément.
href URL ou chemin de route (omettre pour les éléments parents avec children).
description Texte affiché sous le libellé dans le style méga-menu.
icon Nom d'icône Lucide affiché à côté du libellé.
target Cible de l'ancre (généralement _blank pour les liens externes).
rel Attribut rel de l'ancre (couramment noopener noreferrer avec _blank).
children Éléments de navigation enfants formant un sous-menu ou un méga-menu.

Un menu qui s'ouvre depuis un bouton déclencheur, avec des sous-menus imbriqués optionnels.

Propriété Description
trigger L'élément qui ouvre le menu.
menuItems Tableau d'éléments de menu (voir ci-dessous).

Chaque élément de menu (MenuItemSchema) :

Propriété d'élément Description
label Texte d'affichage (omettre pour un séparateur).
icon Nom d'icône Lucide à côté du libellé.
shortcut Indice de raccourci clavier à droite (p. ex. Ctrl+C).
disabled Visible mais non cliquable.
separator Rend une ligne de séparation au lieu d'un élément cliquable.
variant Style visuel (p. ex. destructive pour du texte rouge).
children Éléments de sous-menu imbriqués.
action L'action invoquée lorsque l'élément est cliqué.

context-menu

Un menu clic droit utilisant les mêmes éléments MenuItemSchema que dropdown-menu, ancré à la position du pointeur plutôt qu'à un bouton déclencheur.

Propriété Description
menuItems Éléments de menu (même forme que dropdown-menu).
children L'élément auquel le menu contextuel est attaché.

Une barre de menu d'application horizontale (style Fichier / Édition / Affichage), chaque élément de premier niveau ouvrant un menu MenuItemSchema.

Propriété Description
menus Tableau de menus de premier niveau, chacun avec un libellé et des éléments.

Un fil d'Ariane de segments de navigation.

Propriété Description
items Tableau d'éléments de fil d'Ariane (voir ci-dessous).

Chaque élément de fil d'Ariane (BreadcrumbItemSchema) :

Propriété d'élément Description
label Texte d'affichage du segment.
href URL ou chemin de route (omettre pour l'élément de page courante).
icon Nom d'icône Lucide affiché avant le libellé.

tabs

Un conteneur à onglets. Le contenu de chaque onglet est un enfant tab-panel.

Propriété Description
children Composants tab-panel, un par onglet.
props.orientation Direction de disposition des déclencheurs d'onglets : horizontal ou vertical.
props.defaultValue L'onglet ouvert au rendu initial.

pagination

Contrôles de navigation de page pour les listes/tables paginées.

Propriété Description
totalPages Nombre total de pages.
currentPage La page actuellement active.
siblingCount Combien de numéros de page afficher de chaque côté de la page courante.

toggle / toggle-group

Boutons bascule pour la navigation/le filtrage. toggle est une bascule unique ; toggle-group en regroupe plusieurs. (Aussi documentés comme contrôles de formulaire — voir Contrôles de formulaire.)

Propriété Description
props.type Bascules actives single ou multiple.
props.orientation horizontal ou vertical.
options Options de bascule (toggle-group).

button-group

Une rangée de boutons connexes. Combinez avec un dropdown-menu pour construire un motif de bouton fractionné (un bouton principal plus une liste déroulante d'actions secondaires) ; la navigation au clavier fonctionne sur les deux.

Propriété Description
children Les composants button groupés (et dropdown-menu optionnel).
props Attributs HTML (p. ex. className).

Pages connexes