import{_ as i,o as a,c as n,ae as t}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Navigation Components","description":"","frontmatter":{},"headers":[],"relativePath":"ui/navigation.md","filePath":"ui/navigation.md"}'),h={name:"ui/navigation.md"};function l(k,s,p,e,d,E){return a(),n("div",null,[...s[0]||(s[0]=[t(`

Navigation Components ​

Navigation components for building menus, navbars, and tabs with reactive active states.

A responsive navigation bar with built-in styling.

javascript
const $active = $('Home')

_navbar({ class: 'shadow-md' }, [
  div({ class: 'flex-1' }, [
    a({ class: 'text-xl font-bold' }, 'MyApp')
  ]),
  div({ class: 'flex-none gap-2' }, [
    _button({ 
      class: () => $active() === 'Home' ? 'btn-primary btn-sm' : 'btn-ghost btn-sm',
      onclick: () => $active('Home')
    }, 'Home'),
    _button({ 
      class: () => $active() === 'About' ? 'btn-primary btn-sm' : 'btn-ghost btn-sm',
      onclick: () => $active('About')
    }, 'About')
  ])
])

Vertical navigation menu with active state highlighting.

javascript
const $selected = $('dashboard')

_menu({ items: [
  { 
    label: 'Dashboard', 
    icon: '📊',
    active: () => $selected() === 'dashboard',
    onclick: () => $selected('dashboard')
  },
  { 
    label: 'Analytics', 
    icon: '📈',
    active: () => $selected() === 'analytics',
    onclick: () => $selected('analytics')
  }
]})

Tabs (_tabs) ​

Horizontal tabs with lifted styling and active state.

javascript
const $activeTab = $('profile')

_tabs({ items: [
  { 
    label: 'Profile', 
    active: () => $activeTab() === 'profile',
    onclick: () => $activeTab('profile')
  },
  { 
    label: 'Settings', 
    active: () => $activeTab() === 'settings',
    onclick: () => $activeTab('settings')
  }
]})

A dropdown menu that appears on click.

javascript
const $selected = $(null)

_dropdown({ label: 'Options' }, [
  li([a({ onclick: () => $selected('Edit') }, '✏️ Edit')]),
  li([a({ onclick: () => $selected('Duplicate') }, '📋 Duplicate')]),
  li([a({ onclick: () => $selected('Delete') }, '🗑️ Delete')])
])

Complete Navigation Example ​

API Reference ​

PropTypeDescription
classstring | functionAdditional CSS classes
PropTypeDescription
itemsArray<{label: string, icon?: any, active?: boolean|function, onclick: function}>Menu items

_tabs ​

PropTypeDescription
itemsArray<{label: string, active: boolean|function, onclick: function}>Tab items
PropTypeDescription
labelstringDropdown trigger text
classstring | functionAdditional CSS classes
`,29)])])}const o=i(h,[["render",l]]);export{g as __pageData,o as default};