Skip to Content

Sidebar

A responsive navigation component that supports collapsible states, mobile views, and keyboard shortcuts.

Usage

import { Sidebar } from "@rhinolabs/ui"; export default function SidebarDemo() { return ( <Sidebar.Provider> <Sidebar> <Sidebar.Header> <h2 className="px-2 text-lg font-semibold">My App</h2> </Sidebar.Header> <Sidebar.Content> <Sidebar.Menu> <Sidebar.MenuItem> <Sidebar.MenuButton>Dashboard</Sidebar.MenuButton> </Sidebar.MenuItem> <Sidebar.MenuItem> <Sidebar.MenuButton>Settings</Sidebar.MenuButton> </Sidebar.MenuItem> </Sidebar.Menu> </Sidebar.Content> </Sidebar> </Sidebar.Provider> ); }

Examples

With Groups

Sidebar with grouped navigation items.

import { Sidebar } from "@rhinolabs/ui"; export default function SidebarDemo() { return ( <Sidebar.Provider> <Sidebar> <Sidebar.Content> <Sidebar.Group> <Sidebar.GroupLabel>Main Navigation</Sidebar.GroupLabel> <Sidebar.Menu> <Sidebar.MenuItem> <Sidebar.MenuButton>Home</Sidebar.MenuButton> </Sidebar.MenuItem> <Sidebar.MenuItem> <Sidebar.MenuButton>Profile</Sidebar.MenuButton> </Sidebar.MenuItem> </Sidebar.Menu> </Sidebar.Group> <Sidebar.Group> <Sidebar.GroupLabel>Settings</Sidebar.GroupLabel> <Sidebar.Menu> <Sidebar.MenuItem> <Sidebar.MenuButton>Account</Sidebar.MenuButton> </Sidebar.MenuItem> <Sidebar.MenuItem> <Sidebar.MenuButton>Preferences</Sidebar.MenuButton> </Sidebar.MenuItem> </Sidebar.Menu> </Sidebar.Group> </Sidebar.Content> </Sidebar> </Sidebar.Provider> ); }

With Variants

Different sidebar variants.

import { Sidebar } from "@rhinolabs/ui"; import { HomeIcon, SettingsIcon } from "lucide-react"; export default function SidebarDemo() { return ( <Sidebar.Provider> <Sidebar variant="floating" collapsible="icon"> <Sidebar.Content> <Sidebar.Menu> <Sidebar.MenuItem> <Sidebar.MenuButton tooltip="Dashboard"> <HomeIcon /> <span>Dashboard</span> </Sidebar.MenuButton> </Sidebar.MenuItem> <Sidebar.MenuItem> <Sidebar.MenuButton tooltip="Settings"> <SettingsIcon /> <span>Settings</span> </Sidebar.MenuButton> </Sidebar.MenuItem> </Sidebar.Menu> </Sidebar.Content> </Sidebar> </Sidebar.Provider> ); }

Props

PropTypeDefaultDescription
variant"sidebar" | "floating" | "inset""sidebar"Visual variant
side"left" | "right""left"Side placement
collapsible"offcanvas" | "icon" | "none""offcanvas"Collapse behavior

SidebarProvider

PropTypeDefaultDescription
defaultOpenbooleantrueInitial open state
openboolean-Controlled open state
onOpenChange(open: boolean) => void-Open state change handler

Design Considerations

  • Choose appropriate variant
  • Consider mobile experience
  • Organize navigation logically
  • Use clear visual hierarchy
  • Handle responsive states

Accessibility

  • Supports keyboard shortcuts
  • Maintains focus management
  • Provides ARIA labels
  • Handles screen readers
  • Supports mobile interactions
Last updated on