Source

Command Palette

Search for a command to run...

Sidebar

Collapsible navigation panel with multiple variants and mobile support.

About Sidebar

A collapsible navigation panel that displays navigation items on the left or right side of the screen. Supports sidebar, floating, and inset variants with offcanvas, icon-only, and no-collapse modes. On mobile, displays as a sheet overlay. Includes multiple sub-components for building complete sidebar layouts with headers, content, groups, menus, and footers.

Installation

Import the Sidebar component from LSD:
import { Sidebar } from '@nipsys/lsd'

export default function MyComponent() {
  return <Sidebar />
}

Usage

The simplest form of the component with default styling.
Basic

Composition

Sidebar
├── SidebarHeader
│ └── SidebarMenu
├── SidebarContent
│ └── SidebarGroup
├── SidebarSeparator
├── SidebarInput
├── SidebarFooter
├── SidebarRail
├── SidebarInset
├── SidebarTrigger
├── SidebarProvider
└── SidebarMenuSkeleton

API Reference

Sidebar

side
Side of the screen where the sidebar appears. Determines whether sidebar is positioned on left or right side.
Type: "left" | "right"
variant
Visual variant of the sidebar. Controls appearance: sidebar (default edge), floating (with border and shadow), or inset (with inset margins).
Type: "sidebar" | "floating" | "inset"
collapsible
Collapsible behavior of the sidebar. Controls how sidebar collapses: offcanvas (slides out), icon (shows only icons), or none (no collapse).
Type: "offcanvas" | "icon" | "none"
showTrigger
Whether to show the sidebar trigger button. When true, displays the trigger button to toggle sidebar visibility.
Type: boolean
triggerIconExpanded
Icon element for the sidebar trigger when expanded. Passed to SidebarTrigger's icon prop when sidebar is expanded.
Type: React.ReactNode
triggerIconCollapsed
Icon element for the sidebar trigger when collapsed. Passed to SidebarTrigger's icon prop when sidebar is collapsed.
Type: React.ReactNode
triggerClassName
Class name for the sidebar trigger button. Applied to the SidebarTrigger component.
Type: string

SidebarProvider

defaultOpen
Initial open state of the sidebar. Sets whether sidebar starts open or closed.
Type: boolean
open
Controlled open state of the sidebar. Controls sidebar open state when used as controlled component.
Type: boolean
onOpenChange
Callback when sidebar open state changes. Called when user toggles sidebar visibility.
Type: (open: boolean) => void

SidebarMenuButton

asChild
Render as child component instead of button. When true, merges props with the single child element.
Type: boolean
isActive
Marks the menu button as active. Applies active styling to indicate current page or selection.
Type: boolean
tooltip
Tooltip to display on hover when sidebar is collapsed. Content shown in tooltip or props to pass to TooltipContent.
Type: string | (TooltipContentProps & React.RefAttributes<HTMLDivElement> & { container?: HTMLElement; })

SidebarGroupLabel

asChild
Render as child component instead of div. When true, merges props with the single child element.
Type: boolean

SidebarGroupAction

asChild
Render as child component instead of button. When true, merges props with the single child element.
Type: boolean

SidebarMenuAction

asChild
Render as child component instead of button. When true, merges props with the single child element.
Type: boolean
showOnHover
Only show action button on hover. When true, action is hidden by default and visible on hover/focus.
Type: boolean

SidebarMenuSubButton

asChild
Render as child component instead of link. When true, merges props with the single child element.
Type: boolean
size
Size of the submenu button. Controls height and text size.
Type: "sm" | "md"
isActive
Marks the submenu button as active. Applies active styling to indicate current page or selection.
Type: boolean

SidebarMenuSkeleton

showIcon
Show icon placeholder in skeleton. When true, includes an icon placeholder alongside the text skeleton.
Type: boolean

SidebarTrigger

icon
Icon element to display in the trigger button. Defaults to SidebarSimpleIcon with duotone weight.
Type: React.ReactNode
text
Accessible label text for the trigger button. Defaults to "Toggle Sidebar".
Type: string
iconClassName
Class name applied to the icon element. Defaults to "lsd:size-4/5".
Type: string
textClassName
Class name applied to the text span element. Defaults to "lsd:sr-only".
Type: string

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.
Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate through sidebar menu buttons• Arrow Up/Down - Move focus to previous/next menu button• B - Toggle sidebar (keyboard shortcut)• Escape - Close sidebar on mobile
ARIA Attributes
Proper ARIA attributes for screen readers
• aria-label="Toggle Sidebar" on trigger and rail components• data-sidebar attributes identify component structure for styling and accessibility• role="navigation" implied through semantic structure
Focus States
Visible focus indicators for keyboard users
• Focus follows keyboard navigation through menu buttons in document order. Sidebar is hidden from focus when collapsed to icon-only mode (menu items remain visible). On mobile, focus moves to sheet when opened and trap is maintained until closed.
Tabs