# 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`.

```yaml
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 }
```

## `navigation-menu`

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.        |

## `dropdown-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é.   |

## `menubar`

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. |

## `breadcrumb`

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`](/fr/docs/layout-components#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](/fr/docs/form-controls#toggle--toggle-group).)

| 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

- [Présentation des pages](/fr/docs/pages-overview) — le modèle de composants et les actions.
- [Composants de mise en page](/fr/docs/layout-components) — `tab-panel`, `sidebar`, mise en page app-shell.
- [Composants interactifs](/fr/docs/interactive-components) — boutons et liens utilisés dans les menus.
- [Composants de superposition](/fr/docs/overlay-components) — popovers et dialogues ouverts depuis les menus.