Sidebar

Eine App-Seitenleiste, die zu Icons oder off-canvas einklappt, unter deinem Header fixiert bleibt und auf Smartphones zu einem wischbaren Sheet wird.

import {
  IconBook,
  IconChartBar,
  IconChevronRight,
  IconDots,
  IconFolder,
  IconHome,
  IconInbox,
  IconLayoutDashboard,
  IconLogout,
  IconSelector,
  IconSettings,
  IconShare,
  IconTrash,
} from "@tabler/icons-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const projects = [
  { name: "Design engineering", icon: IconFolder },
  { name: "Sales & marketing", icon: IconChartBar },
  { name: "Travel", icon: IconBook },
]

export function SidebarDemo() {
  return (
    <SidebarProvider className="h-128 min-h-0">
      <Sidebar collapsible="icon">
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <DropdownMenu>
                <DropdownMenuTrigger render={<SidebarMenuButton size="lg" />}>
                  <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary text-sm font-semibold text-sidebar-primary-foreground">
                    A
                  </div>
                  <div className="grid min-w-0 flex-1 leading-tight">
                    <span className="truncate font-medium">Acme Inc</span>
                    <span className="truncate text-xs text-muted-foreground">
                      Enterprise
                    </span>
                  </div>
                  <IconSelector className="ms-auto" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-56">
                  <DropdownMenuItem>Acme Inc</DropdownMenuItem>
                  <DropdownMenuItem>Acme Corp.</DropdownMenuItem>
                  <DropdownMenuItem>Evil Corp.</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Platform</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton
                    render={<a href="#" />}
                    isActive
                    tooltip="Home"
                  >
                    <IconHome />
                    <span>Home</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton render={<a href="#" />} tooltip="Inbox">
                    <IconInbox />
                    <span>Inbox</span>
                  </SidebarMenuButton>
                  <SidebarMenuBadge>24</SidebarMenuBadge>
                </SidebarMenuItem>
                <Collapsible
                  defaultOpen
                  render={<SidebarMenuItem />}
                  className="group/collapsible"
                >
                  <CollapsibleTrigger
                    render={<SidebarMenuButton tooltip="Dashboards" />}
                  >
                    <IconLayoutDashboard />
                    <span>Dashboards</span>
                    <IconChevronRight className="ms-auto duration-200 group-data-open/collapsible:rotate-90 motion-safe:transition-transform rtl:-scale-x-100" />
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      <SidebarMenuSubItem>
                        <SidebarMenuSubButton href="#">
                          <span>Overview</span>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                      <SidebarMenuSubItem>
                        <SidebarMenuSubButton href="#">
                          <span>Revenue</span>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </Collapsible>
                <SidebarMenuItem>
                  <SidebarMenuButton render={<a href="#" />} tooltip="Settings">
                    <IconSettings />
                    <span>Settings</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
          <SidebarGroup>
            <SidebarGroupLabel>Projects</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {projects.map((project) => (
                  <SidebarMenuItem key={project.name}>
                    <SidebarMenuButton
                      render={<a href="#" />}
                      tooltip={project.name}
                    >
                      <project.icon />
                      <span>{project.name}</span>
                    </SidebarMenuButton>
                    <DropdownMenu>
                      <DropdownMenuTrigger
                        render={<SidebarMenuAction showOnHover />}
                      >
                        <IconDots />
                        <span className="sr-only">More</span>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent side="right" align="start">
                        <DropdownMenuItem>
                          <IconShare />
                          Share
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem variant="destructive">
                          <IconTrash />
                          Delete
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
          <SidebarMenu>
            <SidebarMenuItem>
              <DropdownMenu>
                <DropdownMenuTrigger render={<SidebarMenuButton size="lg" />}>
                  <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium">
                    OM
                  </div>
                  <div className="grid min-w-0 flex-1 leading-tight">
                    <span className="truncate font-medium">Olivia Martin</span>
                    <span className="truncate text-xs text-muted-foreground">
                      [email protected]
                    </span>
                  </div>
                  <IconSelector className="ms-auto" />
                </DropdownMenuTrigger>
                <DropdownMenuContent side="top" align="start" className="w-56">
                  <DropdownMenuItem>
                    <IconSettings />
                    Account
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <IconLogout />
                    Log out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarFooter>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ms-1" />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="#">Platform</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>Home</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
          <div className="grid gap-4 sm:grid-cols-3">
            <div className="aspect-video rounded-xl bg-muted" />
            <div className="aspect-video rounded-xl bg-muted" />
            <div className="aspect-video rounded-xl bg-muted" />
          </div>
          <div className="min-h-32 flex-1 rounded-xl bg-muted" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/sidebar.json

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Füge die Theme-Tokens zu deinem globalen CSS hinzu, falls du das noch nicht getan hast.

Installiere die Abhängigkeiten.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

components/ui/sidebar.tsx

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { useRender } from "@base-ui/react/use-render"
import { IconLayoutSidebar } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/input.tsx

"use client"

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { useAutosize } from "@/hooks/use-autosize"

components/ui/sheet.tsx

"use client"

import * as React from "react"
import { Drawer as SheetPrimitive } from "@base-ui/react/drawer"
import { IconX } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/skeleton.tsx

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/tooltip.tsx

"use client"

import * as React from "react"
import {
  DirectionProvider,
  useDirection,
  type TextDirection,
} from "@base-ui/react/direction-provider"

hooks/use-composed-ref.ts

import * as React from "react"

function useComposedRef<T>(ref: React.Ref<T> | undefined) {
  const inner = React.useRef<T | null>(null)
  const setRef = React.useCallback(
    (node: T | null) => {
      inner.current = node
      if (typeof ref === "function") {

lib/hotkey.ts

import * as React from "react"

function subscribePlatform() {
  return () => {}
}

function isApplePlatform() {
  if (typeof navigator === "undefined") {

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

Umschließe dein Layout mit <SidebarProvider /> und setze die Seite nach der Sidebar in <SidebarInset />.

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <SidebarTrigger />
        {children}
      </SidebarInset>
    </SidebarProvider>
  )
}

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton render={<a href="/" />} isActive>
                  <IconHome />
                  <span>Home</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  )
}

Komposition

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       ├── SidebarGroupAction
│   │       └── SidebarGroupContent
│   │           └── SidebarMenu
│   │               └── SidebarMenuItem
│   │                   ├── SidebarMenuButton
│   │                   ├── SidebarMenuAction
│   │                   ├── SidebarMenuBadge
│   │                   └── SidebarMenuSub
│   │                       └── SidebarMenuSubItem
│   │                           └── SidebarMenuSubButton
│   ├── SidebarFooter
│   └── SidebarRail
└── SidebarInset
    └── SidebarTrigger

SidebarProvider hält den Open-Zustand, das Tastenkürzel und die Breiten.
Sidebar ist eine Spalte, die beim Scrollen der Seite haften bleibt. Unter 768px wird sie zu einem Sheet.
SidebarHeader und SidebarFooter bleiben an Ort und Stelle. SidebarContent scrollt dazwischen.
SidebarGroup ist ein Abschnitt mit optionalem Label und optionaler Aktion. SidebarMenu hält die Links.
SidebarInset ist die Seite neben der Sidebar.

variant legt das Aussehen fest: eine volle sidebar, ein schwebendes floating-Panel oder inset, bei dem die Seite zu einer Karte auf der Sidebar-Farbe wird. Wechsle zwischen ihnen, um das Layout animiert zu sehen.

"use client"

import * as React from "react"
import {
  IconHome,
  IconInbox,
  IconSearch,
  IconSettings,
} from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

type Variant = "sidebar" | "floating" | "inset"

const items = [
  { title: "Home", icon: IconHome },
  { title: "Inbox", icon: IconInbox },
  { title: "Search", icon: IconSearch },
  { title: "Settings", icon: IconSettings },
]

export function SidebarVariants() {
  const [variant, setVariant] = React.useState<Variant>("inset")
  const [active, setActive] = React.useState("Home")

  return (
    <SidebarProvider className="h-112 min-h-0">
      <Sidebar variant={variant}>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      isActive={active === item.title}
                      onClick={() => setActive(item.title)}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center gap-2 px-4">
          <SidebarTrigger className="-ms-1" />
          <ToggleGroup
            aria-label="Variant"
            value={[variant]}
            onValueChange={(value) => {
              if (value[0]) {
                setVariant(value[0] as Variant)
              }
            }}
          >
            <ToggleGroupItem value="sidebar">Sidebar</ToggleGroupItem>
            <ToggleGroupItem value="floating">Floating</ToggleGroupItem>
            <ToggleGroupItem value="inset">Inset</ToggleGroupItem>
          </ToggleGroup>
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}

Collapsible

offcanvas gleitet die Sidebar aus dem Blick, icon schrumpft sie auf ihre Icons und zeigt jedes Label in einem Tooltip, und none hält sie offen. Drücke ⌘B oder Ctrl+B, um die Sidebar umzuschalten, in der du arbeitest.

"use client"

import * as React from "react"
import {
  IconHome,
  IconInbox,
  IconSearch,
  IconSettings,
} from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

type CollapsibleMode = "offcanvas" | "icon" | "none"

const items = [
  { title: "Home", icon: IconHome },
  { title: "Inbox", icon: IconInbox },
  { title: "Search", icon: IconSearch },
  { title: "Settings", icon: IconSettings },
]

export function SidebarCollapsible() {
  const [collapsible, setCollapsible] = React.useState<CollapsibleMode>("icon")
  const [active, setActive] = React.useState("Home")

  return (
    <SidebarProvider className="h-112 min-h-0">
      <Sidebar collapsible={collapsible}>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      isActive={active === item.title}
                      onClick={() => setActive(item.title)}
                      tooltip={item.title}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center gap-2 px-4">
          <SidebarTrigger className="-ms-1" />
          <ToggleGroup
            aria-label="Collapsible"
            value={[collapsible]}
            onValueChange={(value) => {
              if (value[0]) {
                setCollapsible(value[0] as CollapsibleMode)
              }
            }}
          >
            <ToggleGroupItem value="offcanvas">Offcanvas</ToggleGroupItem>
            <ToggleGroupItem value="icon">Icon</ToggleGroupItem>
            <ToggleGroupItem value="none">None</ToggleGroupItem>
          </ToggleGroup>
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}

Einklappbare Gruppen und Untermenüs

Umschließe eine SidebarGroup oder ein SidebarMenuItem mit einem Collapsible, rendere das Label oder den Button als Trigger und verschachtle ein SidebarMenuSub.

import {
  IconChevronDown,
  IconChevronRight,
  IconFile,
  IconFolder,
} from "@tabler/icons-react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const sections = [
  {
    title: "Getting started",
    items: ["Installation", "Project structure", "Deploying"],
  },
  {
    title: "Building your app",
    items: ["Routing", "Data fetching", "Rendering", "Caching", "Styling"],
  },
  {
    title: "API reference",
    items: ["Components", "File conventions", "Functions"],
  },
]

export function SidebarSubmenus() {
  return (
    <SidebarProvider className="h-128 min-h-0">
      <Sidebar>
        <SidebarContent>
          <Collapsible defaultOpen className="group/collapsible">
            <SidebarGroup>
              <SidebarGroupLabel render={<CollapsibleTrigger />}>
                Documentation
                <IconChevronDown className="ms-auto duration-200 group-data-open/collapsible:rotate-180 motion-safe:transition-transform" />
              </SidebarGroupLabel>
              <CollapsibleContent>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {sections.map((section, index) => (
                      <Collapsible
                        key={section.title}
                        defaultOpen={index === 1}
                        render={<SidebarMenuItem />}
                        className="group/section"
                      >
                        <CollapsibleTrigger render={<SidebarMenuButton />}>
                          <IconFolder />
                          <span>{section.title}</span>
                          <IconChevronRight className="ms-auto duration-200 group-data-open/section:rotate-90 motion-safe:transition-transform rtl:-scale-x-100" />
                        </CollapsibleTrigger>
                        <CollapsibleContent>
                          <SidebarMenuSub>
                            {section.items.map((item) => (
                              <SidebarMenuSubItem key={item}>
                                <SidebarMenuSubButton
                                  href="#"
                                  isActive={item === "Data fetching"}
                                >
                                  <IconFile />
                                  <span>{item}</span>
                                </SidebarMenuSubButton>
                              </SidebarMenuSubItem>
                            ))}
                          </SidebarMenuSub>
                        </CollapsibleContent>
                      </Collapsible>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </CollapsibleContent>
            </SidebarGroup>
          </Collapsible>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center px-4">
          <SidebarTrigger className="-ms-1" />
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}

Rechte Seite

Setze side="right" und platziere die Sidebar nach SidebarInset. Rail und mobiles Sheet folgen der Seite.

import { IconAt, IconBell, IconMessage, IconUsers } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Mentions", icon: IconAt, count: 3 },
  { title: "Comments", icon: IconMessage, count: 12 },
  { title: "Reminders", icon: IconBell, count: 0 },
  { title: "Followers", icon: IconUsers, count: 128 },
]

export function SidebarRight() {
  return (
    <SidebarProvider className="h-112 min-h-0">
      <SidebarInset>
        <header className="flex h-14 items-center justify-end px-4">
          <SidebarTrigger className="-me-1" />
        </header>
      </SidebarInset>
      <Sidebar side="right">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Activity</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                    {item.count > 0 && (
                      <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
                    )}
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
    </SidebarProvider>
  )
}

Unter einem Header

Die Sidebar ist sticky und beginnt daher unter allem, was darüber liegt. Setze bei einem Sticky-Header --sidebar-top auf dessen Höhe, und die Sidebar haftet darunter und passt in den Rest des Bildschirms.

import { IconHome, IconInbox, IconSettings } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Home", icon: IconHome },
  { title: "Inbox", icon: IconInbox },
  { title: "Settings", icon: IconSettings },
]

export function SidebarHeaderLayout() {
  return (
    <SidebarProvider className="h-112 min-h-0 flex-col [--sidebar-top:3.5rem]">
      <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
        <SidebarTrigger className="-ms-1" />
        <span className="text-sm font-medium">Acme</span>
      </header>
      <div className="flex min-h-0 flex-1">
        <Sidebar>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton>
                        <item.icon />
                        <span>{item.title}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <p className="px-2 text-xs text-muted-foreground">v2.4.0</p>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-1 flex-col gap-4 p-4">
            <div className="min-h-32 flex-1 rounded-xl bg-muted" />
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

Kontrolliert

Übergib open und onOpenChange. Trigger, Rail und Tastenkürzel laufen alle über onOpenChange.

"use client"

import * as React from "react"
import { IconHome, IconInbox, IconSettings } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@/components/ui/sidebar"
import { Switch } from "@/components/ui/switch"

const items = [
  { title: "Home", icon: IconHome },
  { title: "Inbox", icon: IconInbox },
  { title: "Settings", icon: IconSettings },
]

export function SidebarControlled() {
  const [open, setOpen] = React.useState(true)

  return (
    <SidebarProvider
      open={open}
      onOpenChange={setOpen}
      className="h-96 min-h-0"
    >
      <Sidebar collapsible="icon">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton tooltip={item.title}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <div className="flex items-center gap-3 p-4">
          <Switch
            id="sidebar-controlled-open"
            checked={open}
            onCheckedChange={setOpen}
          />
          <label htmlFor="sidebar-controlled-open" className="text-sm">
            Sidebar {open ? "expanded" : "collapsed"}
          </label>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}

Lädt

SidebarMenuSkeleton füllt ein Menü, während es lädt. Die Breiten variieren pro Zeile und stimmen zwischen Server und Client überein.

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

export function SidebarSkeleton() {
  return (
    <SidebarProvider className="h-96 min-h-0">
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Projects</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {Array.from({ length: 6 }).map((_, index) => (
                  <SidebarMenuItem key={index}>
                    <SidebarMenuSkeleton showIcon />
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center px-4">
          <SidebarTrigger className="-ms-1" />
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}

Rechts nach links

Setze dir="rtl" und side="right". Abstände, Untermenü-Linien, Tooltips und das Trigger-Icon spiegeln sich.

import { IconHome, IconInbox, IconSettings } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "الرئيسية", icon: IconHome },
  { title: "البريد الوارد", icon: IconInbox, badge: "٢٤" },
  { title: "الإعدادات", icon: IconSettings },
]

export function SidebarRtl() {
  return (
    <SidebarProvider dir="rtl" className="h-96 min-h-0">
      <Sidebar side="right" collapsible="icon" dir="rtl">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>التطبيق</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item, index) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      isActive={index === 0}
                      tooltip={item.title}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                    {item.badge && (
                      <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
                    )}
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center px-4">
          <SidebarTrigger className="-ms-1" />
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}

Breite

Die Sidebar ist 16rem breit, auf Smartphones 18rem und eingeklappt auf Icons 3rem. Überschreibe --sidebar-width, --sidebar-width-mobile und --sidebar-width-icon am Provider.

<SidebarProvider
  style={
    {
      "--sidebar-width": "20rem",
      "--sidebar-width-mobile": "20rem",
    } as React.CSSProperties
  }
>

Den Zustand persistieren

Die Sidebar hat keine Seiteneffekte. Um zu merken, ob sie offen war, speichere es in onOpenChange und lies es beim Rendern auf dem Server in defaultOpen zurück.

"use client"

export function Providers({
  defaultOpen,
  children,
}: {
  defaultOpen: boolean
  children: React.ReactNode
}) {
  return (
    <SidebarProvider
      defaultOpen={defaultOpen}
      onOpenChange={(open) => {
        document.cookie = `sidebar_state=${open}; path=/; max-age=604800`
      }}
    >
      {children}
    </SidebarProvider>
  )
}

Tastatur

Taste	Aktion
`⌘ + BCtrl + B`	Schaltet die Sidebar um. Bei mehreren Sidebars auf einer Seite reagiert die mit dem Fokus, sonst die erste. Wird ignoriert, während in einem Rich-Text-Editor getippt wird.
`TabShift + Tab`	Bewegt sich durch die Links. Eine eingeklappte Off-Canvas-Sidebar wird übersprungen.
`EnterSpace`	Aktiviert den fokussierten Link, Button oder Trigger.
`Esc`	Schließt die Sidebar auf Smartphones.

Barrierefreiheit

SidebarTrigger trägt das Label „Toggle Sidebar“ und stellt aria-expanded und aria-controls bereit.
isActive setzt aria-current="page".
Beim Einklappen außerhalb des Canvas wird der Inhalt vor Tastatur und Screenreadern verborgen. Lag der Fokus darin, wandert er zum Trigger.
Auf Icons eingeklappt, bleiben Labels im zugänglichen Namen jedes Links und erscheinen bei Hover und Tastaturfokus als Tooltip. Gruppenlabels, Aktionen und Badges sind ausgeblendet.
Auf Smartphones ist die Sidebar ein modales Sheet: Der Fokus ist gefangen, Wischen oder Esc schließt sie, und das Folgen eines Links schließt sie. Links, die einen neuen Tab öffnen, Downloads und Klicks mit Modifier lassen sie offen.
Bei aktivierter reduzierter Bewegung klappt sie sofort ein.

API-Referenz

SidebarProvider

Prop	Typ	Standard
`defaultOpen`	`boolean`	`true`
`open`	`boolean`	`–`
`onOpenChange`	`(open: boolean) => void`	`–`
`keyboardShortcut`mod ist ⌘ auf Apple-Plattformen und sonst Strg. null schaltet es ab.	`string \| null`	`"mod+b"`

Attribut	Beschreibung
`data-slot="sidebar-wrapper"`	Der Layout-Wrapper.
`--sidebar-width`	Breite im ausgeklappten Zustand. Standard ist 16rem.
`--sidebar-width-mobile`	Breite des Phone-Sheets. Standard ist 18rem.
`--sidebar-width-icon`	Breite im auf Icons eingeklappten Zustand. Standard ist 3rem.
`--sidebar-top`	Wo die Sidebar beim Scrollen haftet, etwa unter einem Sticky-Header. Standard ist 0px.

Sidebar

className und weitere Props gehen an den Sidebar-Container.

Prop	Typ	Standard
`side`	`"left" \| "right"`	`"left"`
`variant`plain entfernt Fläche, Randlinie, Scrollleiste und den Abstand zwischen Menü-Items, für eine Sidebar, die auf der Seite sitzt.	`"sidebar" \| "floating" \| "inset" \| "plain"`	`"sidebar"`
`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`
`mobile`Wie sie auf Smartphones öffnet: als Sheet von der Seite oder hereingleitend, um den Bildschirm zu füllen, wie in Chat-Apps.	`"sheet" \| "fullscreen"`	`"sheet"`
`dir`Legt auch die Richtung des Phone-Sheets fest.	`"ltr" \| "rtl"`	`–`

Attribut	Beschreibung
`data-slot="sidebar"`	Die Sidebar oder auf Smartphones das Sheet.
`data-state`	"expanded" oder "collapsed".
`data-collapsible`	Der Collapsible-Modus, solange eingeklappt, sonst "". Style Kinder mit group-data-[collapsible=icon]:.
`data-variant`	Die Variante.
`data-side`	Die Seite.
`data-mobile`	Vorhanden am Phone-Sheet.
`data-slot="sidebar-container"`	Das Panel, das gleitet und die Größe ändert.
`data-slot="sidebar-inner"`	Die Fläche, die den Inhalt hält.

SidebarTrigger

Ein Ghost-Icon-Button, der toggleSidebar aufruft. Rufe event.preventDefault() in onClick auf, um das zu unterbinden. Übergib Kinder, um das Icon zu ersetzen.

Attribut	Beschreibung
`data-slot="sidebar-trigger"`	Der Trigger.
`aria-expanded`	Ob die Sidebar offen ist.

SidebarRail

Eine schmale Trefferfläche am Rand der Sidebar, die sie per Klick umschaltet. Sie ist nicht in der Tab-Reihenfolge, da Trigger und Tastenkürzel Tastaturnutzer abdecken. Ist die Sidebar außerhalb des Canvas, bleibt die Rail am Bildschirmrand.

Attribut	Beschreibung
`data-slot="sidebar-rail"`	Die Rail.

SidebarInset

Ein <main>, das die restliche Breite einnimmt. Neben einer inset-Sidebar wird es zu einer abgerundeten Karte.

Prop	Typ	Standard
`render`Rendert ein anderes Element. Übergib ein <div />, wenn die Seite bereits ein <main>-Landmark hat.	`React.ReactElement \| (props) => React.ReactElement`	`–`

Attribut	Beschreibung
`data-slot="sidebar-inset"`	Der Seitenbereich.

SidebarHeader, SidebarContent, SidebarFooter

Einfache <div>-Elemente. Der Inhalt scrollt mit einer dünnen Scrollleiste und weichen Rand-Fades.

Attribut	Beschreibung
`data-slot="sidebar-header"`	Oberer Abschnitt.
`data-slot="sidebar-content"`	Scrollbarer Mittelteil.
`data-slot="sidebar-footer"`	Unterer Abschnitt.

SidebarGroup, SidebarGroupContent

Attribut	Beschreibung
`data-slot="sidebar-group"`	Ein Abschnitt der Sidebar.
`data-slot="sidebar-group-content"`	Der Inhalt der Gruppe.

SidebarGroupLabel

Prop	Typ	Standard
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Attribut	Beschreibung
`data-slot="sidebar-group-label"`	Gleitet nach oben und blendet aus, wenn auf Icons eingeklappt.

SidebarGroupAction

Prop	Typ	Standard
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Attribut	Beschreibung
`data-slot="sidebar-group-action"`	Braucht ein zugängliches Label.

SidebarMenu, SidebarMenuItem

Ein <ul> und seine <li>-Items. Setze gap="none" für dichte Listen wie Chatverläufe, in denen Zeilen bündig sitzen.

Prop	Typ	Standard
`gap`Abstand zwischen Items. Auch an SidebarMenuSub.	`"default" \| "none"`	`"default"`

Attribut	Beschreibung
`data-slot="sidebar-menu"`	Die Liste.
`data-slot="sidebar-menu-item"`	Ein Item. group/menu-item für Hover-Styles.

SidebarMenuButton

Prop	Typ	Standard
`isActive`Hebt es hervor und setzt aria-current="page".	`boolean`	`false`
`variant`	`"default" \| "outline"`	`"default"`
`size`	`"default" \| "sm" \| "lg"`	`"default"`
`tooltip`Wird angezeigt, solange sie auf Icons eingeklappt ist. Der Inhalt gleitet zwischen Items, während du dich am Menü entlang bewegst.	`ReactNode \| TooltipContentProps`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Attribut	Beschreibung
`data-slot="sidebar-menu-button"`	peer/menu-button für Geschwister-Styles.
`data-active`	Vorhanden, solange isActive.
`data-size`	Die Größe.

SidebarMenuAction

Prop	Typ	Standard
`showOnHover`Zeigt es nur, solange das Item gehovert oder fokussiert oder sein Menü offen ist. Auf Touchscreens immer sichtbar.	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Attribut	Beschreibung
`data-slot="sidebar-menu-action"`	Braucht ein zugängliches Label.

SidebarMenuBadge

Attribut	Beschreibung
`data-slot="sidebar-menu-badge"`	Eine Zahl am Ende des Items.

SidebarMenuSkeleton

Prop	Typ	Standard
`showIcon`	`boolean`	`false`

Attribut	Beschreibung
`data-slot="sidebar-menu-skeleton"`	Vor assistiver Technik verborgen.

SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton

Eine verschachtelte Liste mit einer Linie am führenden Rand. Sie klappt weg, wenn die Sidebar auf Icons einklappt.

Prop	Typ	Standard
`isActive`An SidebarMenuSubButton.	`boolean`	`false`
`size`An SidebarMenuSubButton.	`"sm" \| "md"`	`"md"`
`render`An SidebarMenuSubButton.	`ReactElement \| (props, state) => ReactElement`	`<a>`

Attribut	Beschreibung
`data-slot="sidebar-menu-sub"`	Die verschachtelte Liste.
`data-slot="sidebar-menu-sub-button"`	Ein verschachtelter Link.
`data-active`	Vorhanden, solange isActive.

SidebarInput, SidebarSeparator

Ein kleiner Input auf dem Seitenhintergrund und ein feiner Trenner.

Attribut	Beschreibung
`data-slot="sidebar-input"`	Das Input.
`data-slot="sidebar-separator"`	Das Trennzeichen.

useSidebar

Liest und steuert die nächste Sidebar. Wirft außerhalb von SidebarProvider.

const {
  state,
  open,
  setOpen,
  openMobile,
  setOpenMobile,
  isMobile,
  toggleSidebar,
} = useSidebar()

Prop	Typ	Standard
`state`	`"expanded" \| "collapsed"`	`–`
`open`	`boolean`	`–`
`setOpen`	`(open: boolean) => void`	`–`
`openMobile`	`boolean`	`–`
`setOpenMobile`	`(open: boolean) => void`	`–`
`isMobile`	`boolean`	`–`
`toggleSidebar`Schaltet auf Smartphones das Sheet um, sonst die Sidebar.	`() => void`	`–`

In Blocks verwendet

Blocks, die auf Sidebar aufbauen.

Sidebar

Installation

Verwendung

Komposition

Beispiele

Varianten

Collapsible

Einklappbare Gruppen und Untermenüs

Rechte Seite

Unter einem Header

Kontrolliert

Lädt

Rechts nach links

Breite

Den Zustand persistieren

Tastatur

Barrierefreiheit

API-Referenz

SidebarProvider

Sidebar

SidebarTrigger

SidebarRail

SidebarInset

SidebarHeader, SidebarContent, SidebarFooter

SidebarGroup, SidebarGroupContent

SidebarGroupLabel

SidebarGroupAction

SidebarMenu, SidebarMenuItem

SidebarMenuButton

SidebarMenuAction

SidebarMenuBadge

SidebarMenuSkeleton

SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton

SidebarInput, SidebarSeparator

useSidebar

In Blocks verwendet