Brickslab.

@brickslab/ui-web

Navigation latérale organisée en sections avec items cliquables. Affiche l'item actif en fonction de activePath. En position fixe dans l'AppShell — le demo est encapsulé dans un conteneur relatif avec overflow hidden.

Aperçu

sidebar avec 3 sections — conteneur relatif, overflow hidden

largeur personnalisée (width=280)

Props

PropTypeDéfautRequisDescription
sectionsSidebarNavSection[]—✓Tableau de sections de navigation. Chaque section a un titre et une liste d'items.
activePathstring——Chemin de la page courante. L'item correspondant est mis en évidence.
widthnumber232—Largeur en pixels de la sidebar.

Utilisation

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

<SidebarNav
  sections={[
    {
      title: "Typographie",
      items: [
        { label: "Heading", href: "/components/heading" },
        { label: "Text",    href: "/components/text" },
      ],
    },
    {
      title: "Navigation",
      items: [
        { label: "TopNav",     href: "/components/topnav" },
        { label: "SidebarNav", href: "/components/sidebarnav" },
        { label: "Breadcrumb", href: "/components/breadcrumb" },
      ],
    },
    {
      title: "Médias",
      items: [
        { label: "MediaImage",    href: "/components/mediaimage" },
        { label: "MediaCarousel", href: "/components/mediacarousel" },
      ],
    },
  ]}
  activePath="/components/topnav"
  width={232}
/>