Nav

┌─────────────────────────────────────────────────────┐
│ root                                                │
│ ┌─────────────────────────────────────────────────┐ │
│ │ list                                            │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │  link   │ │  link   │ │  link   │ │  link   │ │ │
│ │ │ 🏠 Home │ │ 📄 Docs │ │ 📝 Blog │ │ 💰 Price│ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

┌─────────────────────────────┐
│ root                        │
│ ┌─────────────────────────┐ │
│ │ list                    │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ link (active)       │ │ │
│ │ │ 🏠 Dashboard        │ │ │
│ │ └─────────────────────┘ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ group               │ │ │
│ │ │ Analytics       ▼   │ │ │
│ │ │ ┌─────────────────┐ │ │ │
│ │ │ │ nested          │ │ │ │
│ │ │ │ • Overview      │ │ │ │
│ │ │ │ • Reports       │ │ │ │
│ │ │ │ • Real-time     │ │ │ │
│ │ │ └─────────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ │ ─────── divider ─────── │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ link                │ │ │
│ │ │ ⚙️ Settings         │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

<Nav
  items={[
    { label: 'Home', href: '/', icon: 'home' },
    { label: 'Documentation', href: '/docs', icon: 'book' },
    { label: 'Blog', href: '/blog', icon: 'pencil' },
    { label: 'Pricing', href: '/pricing', icon: 'tag' },
  ]}
/>

<Nav
  orientation="vertical"
  items={[
    { label: 'Dashboard', href: '/dashboard', icon: 'home' },
    {
      label: 'Analytics',
      icon: 'chart',
      children: [
        { label: 'Overview', href: '/analytics' },
        { label: 'Reports', href: '/analytics/reports' },
        { label: 'Real-time', href: '/analytics/realtime', badge: 'Live' },
      ],
    },
    { type: 'divider' },
    { label: 'Settings', href: '/settings', icon: 'cog' },
  ]}
  collapsible
/>

<Nav
  items={[
    { label: 'Inbox', href: '/inbox', icon: 'mail', badge: '12' },
    { label: 'Notifications', href: '/notifications', icon: 'bell', badge: '3' },
    { label: 'Tasks', href: '/tasks', icon: 'check-square' },
  ]}
/>

<Nav variant="default" />    // Simple links
<Nav variant="pills" />      // Rounded pill background
<Nav variant="underline" />  // Underline active state
<Nav variant="bordered" />   // Border around items

<Nav
  orientation="horizontal"
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Phones', href: '/products/electronics/phones', active: true },
  ]}
  separator="/"
/>