Tableau de Bord
Components
Reusable component catalogue, usage register, variables, and live examples.
Used in
No production-page use is registered yet.
Selected component
Menus
src/components/Menu.astro Case 1 — Reusable menu variables
| Property | Example | Purpose |
|---|---|---|
id | admin-components | Optional stable prefix for generated submenu ids. |
ariaLabel | Components navigation | Accessible name for the navigation landmark. |
orientation | vertical | Selects a vertical or horizontal top-level layout. |
variant | panel | Selects plain, panel, or pills. |
density | compact | Selects compact or comfortable item spacing. |
alignment | stretch | Aligns vertical items or distributes horizontal items. |
activeItem | menu | Marks the matching data-menu-id and its parent trail as active. |
submenuMode | collapsible | Keeps groups visible or generates accessible disclosure buttons. |
openItems | ["components"] | Selects initially open groups by data-menu-id. |
mode | multiple | Allows one open collapsible group or several. |
data-menu-label | Components | Marks a wrapper as a submenu group and supplies its label. |
data-menu-id | accordion | Stable item or group key used by active state, opening, and events. |
data-menu-active | boolean | Marks an individual item active directly in the slotted markup. |
data-menu-open | boolean | Marks a collapsible group initially open without using openItems. |
data-menu-disabled | boolean | Shows an unavailable link or group without allowing interaction. |
Accessibility and integration details
The root remains a semantic nav; normal links retain browser Tab navigation.
Collapsible groups use real buttons with aria-expanded and aria-controls.
Every group change emits bf-menu-toggle with itemId, open,
and openItems in event.detail.
Live clickable example
Route definitions, role checks, and translation belong to the parent application component. This reusable menu handles only presentation, active trails, disabled items, and submenu behavior.