NavigationAvailable

Sidebar

Composable side navigation with brand, sections, active state, and a persistent footer.

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/sidebar.json

Usage

Import the component into your project and keep the source code under your control.

tsx

import {
  Sidebar,
  SidebarBrand,
  SidebarContent,
  SidebarSection,
  SidebarMenu,
  SidebarLink,
  SidebarBadge,
  SidebarFooter,
  SidebarItemLabel,
  SidebarToggle,
  SidebarTooltip,
} from "@/components/ui/sidebar"

Variants

Visual options included in the component’s official API.

States & interaction

Appearance, behavior and keyboard checks.

Check rest, hover, focus and selection/expansion. Current links and open content must be identified semantically.
Hover is not selection. Keep the active state when the pointer leaves.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
collapsed	boolean	false	Controlled compact state on Sidebar and SidebarToggle. The parent owns sidebar width and persistence.
onCollapsedChange	(collapsed: boolean) => void	—	SidebarToggle callback; aria-expanded reflects the current state.
label	string / ReactNode	—	Localized accessible label on SidebarToggle; hover and keyboard-focus content on SidebarTooltip.
active	boolean	false	Adds aria-current and the active visual treatment.
href	string	—	Semantic destination for the link.

Accessibility

Rules that should remain intact when adapting the component to a product.

SidebarMenu renders semantic navigation.

The active link uses aria-current="page".

SidebarItemLabel preserves accessible link names when compact; SidebarTooltip works on hover and keyboard focus, including router links.

Use aria-controls on SidebarToggle to identify the sidebar. Render mobile navigation expanded in its own Sidebar.

SidebarBadge pairs muted background and foreground instead of inheriting the active link color.