Sidebar

La navigation principale.

Trois choses la distinguent d'une liste de liens : elle descend aussi profond que l'arborescence du produit, elle se réduit sans enfermer ses sous-menus, et elle ne montre que ce que la session a le droit de voir.

Installation

sia-ui add sidebar

Ou par le paquet, sans rien copier :

import { Sidebar } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
* items	SidebarEntry[]	—
accordion	boolean	false	Une seule branche ouverte par niveau.
activeKey	string	—	La clé de l'entrée courante. Sa branche s'ouvre d'elle-même.
ariaLabel	string	—
can	(rule: PermissionRule) => boolean	—	Évalue les règles de permission des entrées. Vient d'un createAccessLayer de @sia-ui/headless, ou de n'importe quelle fonction. Absent, aucune entrée n'est filtrée.
className	string	—
collapsed	boolean	false	Le rail : les libellés disparaissent, les sous-menus passent en volet. Ils y restent atteignables — c'est tout l'objet du volet. Un menu réduit qui enferme ses enfants n'est pas réduit, il est cassé.
defaultOpenKeys	string[]	—
footer	ReactNode	—
header	ReactNode	—
onNavigate	(item: SidebarItem) => void	—
onOpenKeysChange	(keys: string[]) => void	—
openKeys	string[]	—	Les branches ouvertes. Non fourni, le composant les gère lui-même.
overlayProps	Partial<Omit<OverlayProps, "children" | "open" | "onOpenChange" | "anchorRef">>	—	Réglages des volets du rail — placement, décalage, classe. L'objet descend jusqu'aux nœuds mémoïsés : le passer stable (constante, useMemo) plutôt qu'en littéral, sans quoi l'arbre se redessine à chaque rendu du parent.
renderLink	SidebarRenderLink	—
side	"left" | "right"	left	De quel côté sortent les volets du rail.
size	"sm" | "md" | "lg"	md
tone	ComponentTone	primary
variant	"default" | "filled" | "floating"	default

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.