Brickslab.Tools

@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

Prop	Type	Défaut	Requis	Description
`sections`	`SidebarNavSection[]`	—	✓	Tableau de sections de navigation. Chaque section a un titre et une liste d'items.
`activePath`	`string`	—	—	Chemin de la page courante. L'item correspondant est mis en évidence.
`width`	`number`	`232`	—	Largeur en pixels de la sidebar.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  sections={[]}
  activePath="..."
  width={232}
/>

sectionsactivePathwidth

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}
/>