# Navbar

Navigation bar component for creating responsive headers with logo, navigation links, and actions.

## Tag

`Navbar`

## Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `children` | `VNode \| Array<VNode>` | `-` | Navbar content (should contain left, center, right sections) |

## Styling

Navbar supports all **daisyUI Navbar classes**:

| Category | Keywords | Description |
| :--- | :--- | :--- |
| Base | `navbar` | Base navbar styling |
| Sections | `navbar-start`, `navbar-center`, `navbar-end` | Content alignment sections |
| Background | `bg-base-100`, `bg-base-200`, `bg-primary`, etc. | Background colors |
| Shadow | `shadow`, `shadow-lg`, `shadow-md` | Box shadow variants |

> For further details, check the [daisyUI Navbar Documentation](https://daisyui.com/components/navbar) – Full reference for CSS classes.

## Live Examples

### Basic Navbar

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  return Navbar({ class: 'rounded-box' }, [
    div({ class: 'navbar-start' }, [
      span({ class: 'text-xl font-bold' }, 'Logo')
    ]),
    div({ class: 'navbar-center hidden lg:flex' }, [
      span({ class: 'text-sm' }, 'Navigation Items')
    ]),
    div({ class: 'navbar-end' }, [
      button({ class: 'btn btn-ghost btn-sm' }, 'Login')
    ])
  ]);
};
mount(BasicDemo, '#demo-basic');
```

### With Navigation Links

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-links" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const LinksDemo = () => {
  const active = $('home');
  
  return Navbar({ class: 'rounded-box' }, [
    div({ class: 'navbar-start' }, [
      span({ class: 'text-xl font-bold' }, 'MyApp')
    ]),
    div({ class: 'navbar-center hidden lg:flex' }, [
      div({ class: 'menu menu-horizontal px-1' }, [
        button({ 
          class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
          onclick: () => active('home')
        }, 'Home'),
        button({ 
          class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
          onclick: () => active('about')
        }, 'About'),
        button({ 
          class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
          onclick: () => active('contact')
        }, 'Contact')
      ])
    ]),
    div({ class: 'navbar-end' }, [
      button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
    ])
  ]);
};
mount(LinksDemo, '#demo-links');
```

### With Search

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-search" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const SearchDemo = () => {
  const searchQuery = $('');
  
  return Navbar({ class: 'rounded-box' }, [
    div({ class: 'navbar-start' }, [
      span({ class: 'text-xl font-bold' }, 'MyApp')
    ]),
    div({ class: 'navbar-center' }, [
      div({ class: 'form-control' }, [
        input({
          placeholder: 'Search...',
          value: searchQuery,
          class: 'input input-bordered w-48 md:w-auto',
          oninput: (e) => searchQuery(e.target.value)
        })
      ])
    ]),
    div({ class: 'navbar-end' }, [
      button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
      button({ class: 'btn btn-ghost btn-circle' }, '👤')
    ])
  ]);
};
mount(SearchDemo, '#demo-search');
```

### With Avatar and Dropdown

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const AvatarDemo = () => {
  return Navbar({ class: 'rounded-box' }, [
    div({ class: 'navbar-start' }, [
      span({ class: 'text-xl font-bold' }, 'MyApp')
    ]),
    div({ class: 'navbar-center hidden lg:flex' }, [
      div({ class: 'menu menu-horizontal px-1' }, [
        span({ class: 'text-sm' }, 'Dashboard'),
        span({ class: 'text-sm' }, 'Projects'),
        span({ class: 'text-sm' }, 'Tasks')
      ])
    ]),
    div({ class: 'navbar-end' }, [
      div({ class: 'dropdown dropdown-end' }, [
        div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
          div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
        ]),
        div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
          span({ class: 'menu-item' }, 'Profile'),
          span({ class: 'menu-item' }, 'Settings'),
          span({ class: 'menu-item' }, 'Logout')
        ])
      ])
    ])
  ]);
};
mount(AvatarDemo, '#demo-avatar');
```

### Responsive Navbar

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const ResponsiveDemo = () => {
  const isOpen = $(false);
  
  return div({ class: 'flex flex-col' }, [
    Navbar({ class: 'rounded-box' }, [
      div({ class: 'navbar-start' }, [
        button({ 
          class: 'btn btn-ghost btn-circle lg:hidden',
          onclick: () => isOpen(!isOpen())
        }, '☰')
      ]),
      div({ class: 'navbar-center' }, [
        span({ class: 'text-xl font-bold' }, 'MyApp')
      ]),
      div({ class: 'navbar-end' }, [
        button({ class: 'btn btn-ghost btn-circle' }, '🔔')
      ])
    ]),
    () => isOpen() ? div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
      button({ class: 'btn btn-ghost justify-start' }, 'Home'),
      button({ class: 'btn btn-ghost justify-start' }, 'About'),
      button({ class: 'btn btn-ghost justify-start' }, 'Services'),
      button({ class: 'btn btn-ghost justify-start' }, 'Contact')
    ]) : null
  ]);
};
mount(ResponsiveDemo, '#demo-responsive');
```

### With Brand and Actions

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-brand" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const BrandDemo = () => {
  return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
    div({ class: 'navbar-start' }, [
      span({ class: 'text-xl font-bold' }, 'Brand')
    ]),
    div({ class: 'navbar-center hidden lg:flex' }, [
      div({ class: 'menu menu-horizontal px-1' }, [
        span({ class: 'text-sm' }, 'Features'),
        span({ class: 'text-sm' }, 'Pricing'),
        span({ class: 'text-sm' }, 'About')
      ])
    ]),
    div({ class: 'navbar-end' }, [
      button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
      button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
    ])
  ]);
};
mount(BrandDemo, '#demo-brand');
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  return div({ class: 'flex flex-col gap-4' }, [
    div({ class: 'text-sm font-bold' }, 'Default Navbar'),
    Navbar({ class: 'rounded-box' }, [
      div({ class: 'navbar-start' }, [span({}, 'Start')]),
      div({ class: 'navbar-center' }, [span({}, 'Center')]),
      div({ class: 'navbar-end' }, [span({}, 'End')])
    ]),
    
    div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
    Navbar({ class: 'rounded-box shadow-lg' }, [
      div({ class: 'navbar-start' }, [span({}, 'Logo')]),
      div({ class: 'navbar-end' }, [button({ class: 'btn btn-sm' }, 'Button')])
    ]),
    
    div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
    Navbar({ class: 'rounded-box bg-base-300' }, [
      div({ class: 'navbar-start' }, [span({ class: 'font-bold' }, 'Colored')]),
      div({ class: 'navbar-end' }, [span({ class: 'text-sm' }, 'Info')])
    ])
  ]);
};
mount(VariantsDemo, '#demo-variants');
```