Sidebar

A composable, themeable and customizable sidebar component.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Brand</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton href="/">Home</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    <main>...</main>
  </SidebarInset>
</SidebarProvider>

Sidebar — barre latérale d'application (nav principale) avec header, footer, groupes de menu items, collapsibility, mobile off-canvas. Le pattern shadcn de référence pour un dashboard multi-pages.

Structure : SidebarProvider (root) > Sidebar (left/right) + SidebarInset (main content zone). Sidebar contient Header/Content/Footer, avec des SidebarGroup > SidebarMenu > SidebarMenuItem > SidebarMenuButton.

Installation

Terminal

$ bext ui add sidebar

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset, SidebarTrigger } from "@bext-stack/ui/primitives"

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Acme Corp</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive href="/">Home</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    <main>Content</main>
  </SidebarInset>
</SidebarProvider>

Anatomy

<SidebarProvider>
  <Sidebar>
    ├── <SidebarHeader>Brand</SidebarHeader>
    ├── <SidebarContent>
    │   └── <SidebarGroup>
    │       ├── <SidebarGroupLabel>Platform</SidebarGroupLabel>
    │       └── <SidebarMenu>
    │           └── <SidebarMenuItem>
    │               └── <SidebarMenuButton href="/">Home</SidebarMenuButton>
    └── <SidebarFooter>Profile</SidebarFooter>
  </Sidebar>
  <SidebarInset>
    ├── <SidebarTrigger />
    └── {main content}
  </SidebarInset>
</SidebarProvider>

API Reference

SidebarProvider

Prop	Type	Default	Description
defaultOpen	boolean	true	undefined
children	ReactNode	—	undefined

Sidebar

Prop	Type	Default	Description
side	"left" \| "right"	"left"	undefined
variant	"sidebar" \| "floating" \| "inset"	"sidebar"	undefined
collapsible	"offcanvas" \| "icon" \| "none"	"offcanvas"	undefined

SidebarHeader / SidebarFooter / SidebarContent

Prop	Type	Default	Description
children	ReactNode	—	undefined

SidebarGroup

Prop	Type	Default	Description
children	ReactNode	—	undefined

SidebarGroupLabel

Prop	Type	Default	Description
children	ReactNode	—	Label uppercase muted au-dessus du groupe.

SidebarMenu

Prop	Type	Default	Description
children	ReactNode	—	undefined

SidebarMenuItem

Prop	Type	Default	Description
children	ReactNode	—	undefined

SidebarMenuButton

Prop	Type	Default	Description
href	string	—	undefined
isActive	boolean	—	undefined
children	ReactNode	—	undefined

SidebarTrigger

Prop	Type	Default	Description
className	string	—	Bouton hamburger pour toggle open/collapsed.

SidebarInset

Prop	Type	Default	Description
children	ReactNode	—	Zone content à droite de la sidebar.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="sidebar-trigger"	SidebarTrigger	undefined	undefined
data-state	Sidebar root	"open" \| "collapsed"	undefined
data-side	Sidebar root	"left" \| "right"	undefined
data-active	SidebarMenuButton	"true" \| "false"	undefined

Keyboard

Key	Action
`Ctrl/Cmd + B`	Toggle open/collapsed (raccourci recommandé — à câbler).

Accessibility

Sidebar porte <nav aria-label="Main">. Les MenuButton sont des <a> ou <button> avec aria-current="page" pour l'item actif.

Try it live Open in play

Edit this example live in the bext playground — it compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// An app-shell layout: a fixed left navigation column beside a content
// area. The nav lists sections; the first item reads as active.
const items = [["\uD83C\uDFE0", "Home", true], ["\uD83D\uDCC4", "Documents", false], ["\u2699", "Settings", false], ["\uD83D\uDC65", "Team", false]];

export default function Page() {
  return (
    <main style={{ maxWidth: 720, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Sidebar</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A composable app-shell with a navigation rail.</p>
      <div style={{ marginTop: 22, display: "flex", height: 280, border: "1px solid #e2e8f0", borderRadius: 12, overflow: "hidden" }}>
        <nav style={{ width: 200, background: "#f8fafc", borderRight: "1px solid #e2e8f0", padding: 12, display: "grid", gap: 4, alignContent: "start" }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.04em", padding: "6px 10px" }}>Application</div>
          {items.map(([icon, name, active]) => (
            <div
              key={name}
              style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", borderRadius: 8, fontSize: 14, fontWeight: active ? 600 : 400, color: "#0a0a0a", background: active ? "#e2e8f0" : "transparent", cursor: "pointer" }}

The React idiom — same UI, for comparison.

← Sheet Skeleton →

On This Page