<a id="navbar"></a>

## Navbar  
**Category**: Navigation
Navigation container with responsive dropdown menus and branding
### Examples

#### Basic Navbar  
```python
Div(
    Button(
        "daisyUI",
        cls="btn btn-ghost text-xl"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box"
)
```

#### Color Variations  
```python
Div(
    Button("daisyUI", cls="btn btn-ghost text-xl"),
    cls="navbar bg-neutral text-neutral-content shadow-xl rounded-box"
),
Div(
    Button("daisyUI", cls="btn btn-ghost text-xl"),
    cls="navbar bg-base-300 shadow-xl rounded-box mt-4"
),
Div(
    Button("daisyUI", cls="btn btn-ghost text-xl"),
    cls="navbar bg-primary text-primary-content shadow-xl rounded-box mt-4"
)
```

#### Dropdown Menus  
```python
Div(
    Div(
        Button(
            "daisyUI",
            cls="btn btn-ghost text-xl"
        ),
        cls="flex-1"
    ),
    Div(
        Ul(
            Li(
                Button("Link")
            ),
            Li(
                Details(
                    Summary("Parent"),
                    Ul(
                        Li(Button("Link 1")),
                        Li(Button("Link 2")),
                        cls="p-2 bg-base-100 rounded-t-none"
                    ),
                    open=""
                )
            ),
            cls="menu menu-horizontal px-1 bg-base-100"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-32"
)
```

#### Responsive Menu  
```python
Div(
    Div(
        Div(
            Div(
                Icon.menu_bars_uneven(cls="h-5 w-5"),
                tabindex="0",
                role="button",
                cls="btn btn-ghost lg:hidden"
            ),
            Ul(
                Li(Button("Item 1")),
                Li(
                    Button("Parent"),
                    Ul(
                        Li(Button("Submenu 1")),
                        Li(Button("Submenu 2")),
                        cls="p-2 bg-base-100 w-40"
                    )
                ),
                Li(Button("Item 3")),
                tabindex="0",
                cls="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
            ),
            cls="dropdown"
        ),
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="navbar-start"
    ),
    Div(
        Ul(
            Li(Button("Item 1")),
            Li(
                Details(
                    Summary("Parent"),
                    Ul(
                        Li(Button("Submenu 1")),
                        Li(Button("Submenu 2")),
                        cls="p-2 bg-base-100 w-40"
                    )
                )
            ),
            Li(Button("Item 3")),
            cls="menu menu-horizontal px-1"
        ),
        cls="navbar-center hidden lg:flex"
    ),
    Div(
        Button("Button", cls="btn"),
        cls="navbar-end"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-48"
)
```

#### Navbar with Icon  
```python
Div(
    Div(
        A("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Button(
            Icon.three_dots(),
            cls="btn btn-square btn-ghost"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box"
)
```

#### Search Dropdown  
```python
Div(
    Div(
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Input(
                type="text",
                placeholder="Search",
                cls="input input-bordered w-24 md:w-auto"
        ),                
        Div(
            Div(
                Div(
                    Img(
                        alt="Tailwind CSS Navbar component",
                        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                    ),
                    cls="w-10 rounded-full"
                ),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle avatar"
            ),
            Ul(
                Li(
                    Button(
                        "Profile",
                        Span("New", cls="badge"),
                        cls="justify-between"
                    )
                ),
                Li(Button("Settings")),
                Li(Button("Logout")),
                tabindex="0",
                cls="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
            ),
            cls="dropdown dropdown-end"
        ),
        cls="flex gap-2"
    ),
    cls="navbar bg-base-100 shadow-sm mb-32"
)
```

#### Icon Dropdown  
```python
Div(
    Div(
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Div(
            Div(
                Div(
                    Icon.shopping_cart(cls="h-5 w-5"),
                    Span("8", cls="badge badge-sm indicator-item"),
                    cls="indicator"
                ),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle"
            ),
            Div(
                Div(
                    Span("8 Items", cls="text-lg font-bold"),
                    Span("Subtotal: $999", cls="text-info"),
                    Div(
                        Button("View cart", cls="btn btn-primary btn-block"),
                        cls="card-actions"
                    ),
                    cls="card-body"
                ),
                tabindex="0",
                cls="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow"
            ),
            cls="dropdown dropdown-end"
        ),
        Div(
            Div(
                Div(
                    Img(
                        alt="Tailwind CSS Navbar component",
                        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                    ),
                    cls="w-10 rounded-full"
                ),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle avatar"
            ),
            Ul(
                Li(
                    Button(
                        "Profile",
                        Span("New", cls="badge"),
                        cls="justify-between"
                    )
                ),
                Li(Button("Settings")),
                Li(Button("Logout")),
                tabindex="0",
                cls="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
            ),
            cls="dropdown dropdown-end"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-32"
)
```

#### Icons start/end  
```python
Div(
    Div(
        Button(
            Icon.menu_bars(),
            cls="btn btn-square btn-ghost"
        ),
        cls="flex-none"
    ),
    Div(
        A("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Button(
            Icon.three_dots(),
            cls="btn btn-square btn-ghost"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box"
)
```

#### Center Logo Dropdown  
```python
Div(
    Div(
        Div(
            Div(
                Icon.menu_bars_short(cls="h-5 w-5"),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle"
            ),
            Ul(
                Li(Button("Homepage")),
                Li(Button("Portfolio")),
                Li(Button("About")),
                tabindex="0",
                cls="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
            ),
            cls="dropdown"
        ),
        cls="navbar-start"
    ),
    Div(
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="navbar-center"
    ),
    Div(
        Button(
            Icon.search_circle(cls="h-5 w-5"),
            cls="btn btn-ghost btn-circle"
        ),
        Button(
            Div(
                Icon.notification_bell(cls="h-5 w-5"),
                Span(cls="badge badge-xs badge-primary indicator-item"),
                cls="indicator"
            ),
            cls="btn btn-ghost btn-circle"
        ),
        cls="navbar-end"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-32"
)
```