Sidebar

Full-height sidebar with controlled and uncontrolled collapse modes. When collapsed, icon-only mode shows Tooltip labels on hover. Press Ctrl+B (or Cmd+B) to toggle. Use useSidebarToggle() to connect an external toggle button.

Usage

import { Sidebar, SidebarHeader, SidebarBody, SidebarFooter } from "nosible-ux"

export default function Example() {
  return (
    <Sidebar>
      <SidebarHeader>Nosible</SidebarHeader>
      <SidebarBody>{/* NavLink items */}</SidebarBody>
      <SidebarFooter>{/* User menu */}</SidebarFooter>
    </Sidebar>
  )
}

Examples

Controlled collapse

Accessibility

role="navigation" with aria-label="Main". Collapsed items show Tooltip labels (300ms delay). Keyboard shortcut Ctrl+B / Cmd+B toggles state.

Props