Composant · Navigation

NavItem

Stable

L'anatomie de rangée canonique du système de navigation : tête (pastille/ton via swatch), titre, caption muette, bulle de count, depth (échelle typographique décroissante), status sémantique et divider optionnel. Compose SelectableRow (rôle ARIA dérivé du conteneur), ColorSwatch/StatusDot et Badge ; style token-only, un seul tab-stop.

Exemples

Pastille de ton/couleur, bulle de compte, sélection, ton sémantique et profondeur.

Rangées de navigation

Mes favoris 5

Non retenus 5043

Zones 4+ seulement

Signal: modification zonage 1675 DesignationEvent

Voir le code (Svelte)

<div class="navitem-demo-col">
  <NavItem title="Mes favoris" swatch={{"tone":"info"}} count={5} />
  <NavItem
    title="Non retenus"
    swatch={{"tone":"error"}}
    status="error"
    count={5043}
  />
  <NavItem
    title="Zones 4+ seulement"
    swatch={{"color":"#16a34a","shape":"circle"}}
    selected
  />
  <NavItem
    title="Signal: modification zonage 1675"
    caption="DesignationEvent"
    depth={1}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`title`	`string`	–	Libellé principal (requis).
`caption`	`string`	–	2ᵉ ligne muette, ellipse indépendante.
`swatch`	`{ color?, tone?, shape? }`	–	Pastille de tête : couleur arbitraire (ColorSwatch) ou ton (StatusDot).
`count`	`number`	–	Bulle de compte en queue (Badge circle).
`depth`	`0 \| 1 \| 2 \| 3`	`0`	Profondeur : graisse/taille décroissante + indentation.
`status`	`'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'neutral'`	Ton sémantique de la rangée.
`selected`	`boolean`	`false`	Sélection (2 signaux).
`divider`	`boolean`	`false`	Séparateur après la rangée.
`href`	`string`	–	Rend la rangée comme un lien.

Tokens CSS

Variable CSS	Description
`--st-component-navItem-depth0..3-*`	Échelle typographique par profondeur.
`--st-semantic-feedback-*`	Ton sémantique du titre (status).