Composant · Navigation

NavSection

Stable

En-tête de groupe d'un rail/drawer : libellé small-caps (via Overline), compteur optionnel (Badge), repli optionnel (via Collapsible, aria-expanded) et emplacement normé pour une action de section. Donne la hiérarchie typographique et un foyer pour l'action locale, au lieu d'un primaire planté dans la liste. Style token-only.

Exemples

Section repliable avec compteur, contenant des NavItem.

Section de navigation

Zonage uniquement 33

Multifamilial 4+ ≥ 4 unités 33

Signaux précoces 33

Voir le code (Svelte)

<div class="navsection-demo-col">
  <NavSection label="Signaux" count={33} collapsible open>
    <NavItem title="Zonage uniquement" count={33} swatch={{"tone":"info"}} />
    <NavItem
      title="Multifamilial 4+"
      caption="≥ 4 unités"
      count={33}
      swatch={{"tone":"success"}}
    />
    <NavItem title="Signaux précoces" count={33} swatch={{"tone":"warning"}} />
  </NavSection>
</div>

API du composant

Prop	Type	Défaut	Description
`label`	`string`	–	Libellé small-caps (Overline).
`count`	`number`	–	Compteur de section (Badge circle).
`collapsible`	`boolean`	`false`	En-tête repliable (aria-expanded).
`open`	`boolean`	`true`	État d'ouverture (si collapsible).
`as`	`'h2' \| 'h3'`	`'h3'`	Niveau de titre en mode statique.
`action`	`Snippet`	–	Action de section (mode statique uniquement).

Tokens CSS

Variable CSS	Description
`--st-component-overline-*`	Style du libellé small-caps.
`--st-component-navSection-*`	Padding/gaps de l'en-tête.