Sidebar

Vertical navigation sidebar with sections, links, and dividers.

Installation

npx @obi/ui add sidebar

Requires: next/link

Preview

Usage

import { Sidebar, SidebarSection, SidebarLink, SidebarDivider } from '@/src/components/Sidebar/Sidebar';

<Sidebar>
  <SidebarSection>
    <SidebarLink href="/" isActive>Home</SidebarLink>
    <SidebarLink href="/docs">Documentation</SidebarLink>
    <SidebarLink href="/examples">Examples</SidebarLink>
  </SidebarSection>
  <SidebarDivider />
  <SidebarSection label="Components">
    <SidebarLink href="/components/button">Button</SidebarLink>
    <SidebarLink href="/components/input">Input</SidebarLink>
  </SidebarSection>
</Sidebar>

Props

Name	Type	Default	Description
width	string	'w-56'	Tailwind width class for the sidebar.
className	string	''	Additional CSS classes.
children	ReactNode	undefined	Sidebar content (sections, links, dividers).