Skip to content

Navigation Components

Components for application navigation and layout.

Application logo component with consistent styling.

Features:

  • SVG-based logo
  • Responsive sizing
  • Link to home page
  • Accessible alt text

A menu that appears when you click a trigger (like a button or user avatar).

How to use:

  1. Click the trigger button
  2. Menu appears below or above
  3. Click a menu item to select it
  4. Menu closes automatically
  5. Click outside to close without selecting

Example uses:

  • User profile menu
  • Actions menu (Edit, Delete)
  • Collection selector

Sidebar navigation item with active state.

Features:

  • Icon support
  • Active state highlighting
  • Hover effects
  • Badge/counter support
  • Nested menu support

MainHeader

Top navigation header component.

Features:

  • Logo placement
  • User profile dropdown
  • Navigation items
  • Search integration
  • Responsive layout

SidebarHeader

Sidebar header with branding and controls.

Features:

  • Logo display
  • Collapse/expand controls
  • Responsive behavior
  • Consistent styling

SidebarContent

Main sidebar navigation content.

Features:

  • Collection list
  • Quick actions
  • Chat history
  • Settings access
  • Scrollable content area