Composant · Navigation

SideNav

Stable

Navigation verticale persistante pour les pages, basée sur une liste de liens natives.

Quand l’utiliser

Pour une navigation principale ou secondaire de type panneau.
Quand la structure de pages doit rester visible pendant la navigation.
Quand un état visuel clair de page active doit être maintenu.

Exemples

Exemple side nav

Sentropic

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Header title="Sentropic" />
  <SideNav
    label="Navigation principale"
    items={[{"label":"Composants","href":"/components/button"},{"label":"Vue d’ensemble","href":"/components/side-nav"},{"label":"Thèmes","href":"/#themes","active":true},{"label":"Contrats","href":"/#contracts"}]}
  />
</div>

API

Prop	Type	Défaut	Description
`items`	`SideNavItem[]`	required	Liste de liens avec label/href/active
`label`	`string`	Navigation	Libellé ARIA du panneau <code>nav</code>.
`class`	`string`	optionnel	Classe sur le wrapper <code>nav</code>.
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur l’élément <code>nav</code>.

Tokens utilisés

--st-component-sideNav-background
--st-component-sideNav-border
--st-component-sideNav-width
--st-component-sideNav-itemText
--st-component-sideNav-activeBackground
--st-component-sideNav-activeText
--st-component-control-hoverBackground