Sidebar Components

Navigation components for sidebar with support for nested items and states.

Sidebar Item

Primary navigation element (first-level). Used to navigate to main sections.

Default State

Link in Bio

Hovered State

Link in Bio

Active State

Link in Bio

Without Right Icon

Analytics

Sidebar Subitem

Nested navigation element (second-level). Used inside Sidebar Subitems Block.

Default State

Links

Hovered State

Links

Selected State

Links

Sidebar Subitems Block

Container for grouping subitems with indentation and border.

Links

Analytics

Settings

Appearance

Sidebar Block

Complete navigation block with main item and optional nested subitems.

Link in Bio

Links

Analytics

Settings

Appearance

Analytics

Settings

Complete Sidebar Example

Full sidebar navigation with multiple blocks and nested items.

Link in Bio

Links

Analytics

Settings

Appearance

Analytics

Settings

Usage Examples

Basic Sidebar Item

<SidebarItem
  title="Link in Bio"
  icon={<Link className="size-4" />}
  rightIcon={<ChevronDown className="size-4" />}
  onClick={() => console.log('clicked')}
/>

Sidebar Block with Subitems

<SidebarBlock
  item={{
    title: 'Link in Bio',
    icon: <Link className="size-4" />,
    rightIcon: <ChevronDown className="size-4" />,
  }}
  subitems={[
    { title: 'Links', onClick: () => {} },
    { title: 'Analytics', onClick: () => {} },
    { title: 'Settings', onClick: () => {} },
  ]}
  isExpanded={true}
/>