Brickslab.

@brickslab/ui-web

Menu de navigation arborescent avec support des sous-menus imbriqués. Rendu récursif basé sur la propriété children. L'élément actif est mis en évidence via activePath.

Aperçu

menu à 2 niveaux avec activePath

menu plat sans sous-menus

Props

PropTypeDéfautRequisDescription
itemsMenuTreeItem[]—✓Arbre de navigation. Chaque item peut avoir un label, un href optionnel et des children pour les sous-menus.
activePathstring——Chemin de la page courante. L'item correspondant est mis en évidence.
levelnumber0—Niveau d'indentation courant. Utilisé en interne pour le rendu récursif des sous-menus.

Utilisation

tsx
import { MenuTree } from "@brickslab/ui-web";

<MenuTree
  items={[
    { label: "Accueil", href: "/" },
    {
      label: "Composants",
      children: [
        { label: "Heading",     href: "/components/heading" },
        { label: "Text",        href: "/components/text" },
        {
          label: "Navigation",
          children: [
            { label: "TopNav",     href: "/components/topnav" },
            { label: "SidebarNav", href: "/components/sidebarnav" },
          ],
        },
      ],
    },
    { label: "Documentation", href: "/docs" },
  ]}
  activePath="/components/topnav"
/>