VerticalNavbar

A flexible vertical navigation sidebar component perfect for dashboards and admin panels with customizable styling and behavior.

Import

import { VerticalNavbar } from '@akitectio/aki-ui'

Basic Usage

Aki UI

Dashboard

Analytics

Users3

Documents

Settings

Main Content

Your main content goes here...

<VerticalNavbar variant="light" size="md">
  <VerticalNavbar.Header>
    <div className="flex items-center space-x-2">
      <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-sm">
        A
      </div>
      <span className="font-semibold">Aki UI</span>
    </div>
  </VerticalNavbar.Header>
  
  <VerticalNavbar.Item href="#" active icon={<HomeIcon />}>
    Dashboard
  </VerticalNavbar.Item>
  
  <VerticalNavbar.Item href="#" icon={<ChartBarIcon />}>
    Analytics
  </VerticalNavbar.Item>
  
  <VerticalNavbar.Item href="#" icon={<UserGroupIcon />} badge="3">
    Users
  </VerticalNavbar.Item>
  
  <VerticalNavbar.Item href="#" icon={<DocumentTextIcon />}>
    Documents
  </VerticalNavbar.Item>
  
  <VerticalNavbar.Item href="#" icon={<CogIcon />}>
    Settings
  </VerticalNavbar.Item>
</VerticalNavbar>

Live Example

✓

Live Component

Live Component Example

This is a live example using the actual VerticalNavbar component imported from @akitectio/aki-ui!

✅ Component Successfully Imported

The VerticalNavbar component is now being used directly from the aki-ui library.

import { VerticalNavbar } from '@akitectio/aki-ui'
import { 
  HomeIcon, 
  ChartBarIcon, 
  UserGroupIcon, 
  DocumentTextIcon, 
  CogIcon 
} from '@heroicons/react/24/outline'

export default function MyComponent() {
  return (
    <VerticalNavbar variant="light" size="md">
      <VerticalNavbar.Header>
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-sm">
            A
          </div>
          <span className="font-semibold">Aki UI</span>
        </div>
      </VerticalNavbar.Header>
      
      {/* Active item */}
      <VerticalNavbar.Item 
        href="/dashboard" 
        active 
        icon={<HomeIcon />} 
        badge={undefined}
        onClick={() => console.log('Dashboard clicked')}
      >
        Dashboard
      </VerticalNavbar.Item>
      
      {/* Regular items */}
      <VerticalNavbar.Item 
        href="/analytics" 
        icon={<ChartBarIcon />}
        badge={undefined}
        onClick={() => console.log('Analytics clicked')}
      >
        Analytics
      </VerticalNavbar.Item>
      
      {/* Item with badge */}
      <VerticalNavbar.Item 
        href="/users" 
        icon={<UserGroupIcon />} 
        badge="3"
        onClick={() => console.log('Users clicked')}
      >
        Users
      </VerticalNavbar.Item>
      
      <VerticalNavbar.Item 
        href="/documents" 
        icon={<DocumentTextIcon />}
        badge={undefined}
        onClick={() => console.log('Documents clicked')}
      >
        Documents
      </VerticalNavbar.Item>
      
      <VerticalNavbar.Item 
        href="/settings" 
        icon={<CogIcon />}
        badge={undefined}
        onClick={() => console.log('Settings clicked')}
      >
        Settings
      </VerticalNavbar.Item>
    </VerticalNavbar>
  )
}

Variants

Primary

Home

Charts

Dark

Home

Charts

// Primary variant
<VerticalNavbar variant="primary">
  {/* content */}
</VerticalNavbar>

// Secondary variant
<VerticalNavbar variant="secondary">
  {/* content */}
</VerticalNavbar>

// Light variant (default)
<VerticalNavbar variant="light">
  {/* content */}
</VerticalNavbar>

// Dark variant
<VerticalNavbar variant="dark">
  {/* content */}
</VerticalNavbar>

Key Features

Grouping Support

Organize navigation items into logical groups with collapsible sections for better organization.

Collapsible

Save space with a collapsible sidebar that can expand and contract based on user needs.

Mobile Responsive

Automatically adapts to mobile devices with slide-out behavior and touch-friendly interactions.

Multiple Variants

Choose from primary, secondary, light, or dark variants to match your application's theme.

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'light' \| 'dark'	'light'	Visual variant of the navbar
size	'sm' \| 'md' \| 'lg'	'md'	Size of the navbar
collapsible	boolean	false	Whether the navbar can be collapsed
className	string	-	Additional CSS classes

Sub-components

VerticalNavbar.Header

Container for the navbar header content (logo, title, etc.)

<VerticalNavbar.Header collapsible>
  <div className="flex items-center space-x-2">
    <img src="/logo.png" className="w-8 h-8" />
    <span className="font-bold">My App</span>
  </div>
</VerticalNavbar.Header>

VerticalNavbar.Item

Individual navigation item with icon, text, and badge support

<VerticalNavbar.Item 
  href="/dashboard" 
  active 
  icon={<HomeIcon />} 
  badge="new"
>
  Dashboard
</VerticalNavbar.Item>

VerticalNavbar.Group

Groups related navigation items with optional collapsing

<VerticalNavbar.Group 
  title="Management" 
  collapsible 
  defaultCollapsed={false}
>
  <VerticalNavbar.Item href="/users" icon={<UsersIcon />}>
    Users
  </VerticalNavbar.Item>
  <VerticalNavbar.Item href="/settings" icon={<CogIcon />}>
    Settings
  </VerticalNavbar.Item>
</VerticalNavbar.Group>

VerticalNavbar.Footer

Footer area for user profile or additional actions

<VerticalNavbar.Footer>
  <div className="flex items-center space-x-2">
    <div className="w-8 h-8 bg-gray-300 rounded-full"></div>
    <div>
      <div className="text-sm font-medium">John Doe</div>
      <div className="text-xs text-gray-500">john@example.com</div>
    </div>
  </div>
</VerticalNavbar.Footer>