navbar

Navbar is used to show a navigation bar on the top of the page..

Base Navbar

navbar = SingleValueFactory("navbar", "Base navigation bar component") # Base navbar component
navbar_start = SingleValueFactory("navbar-start", "Navbar start part for the div inside navbar, to fill 50% of width") # Navbar start part
navbar_center = SingleValueFactory("navbar-center", "Navbar center part for the div inside navbar, to be at center horizontally") # Navbar center part
navbar_end = SingleValueFactory("navbar-end", "Navbar part for the div inside navbar, to fill second 50% of width") # Navbar end part

Navbar Test Examples

---

source

test_navbar_basic_examples

 test_navbar_basic_examples ()

Test basic navbar utilities.

def test_navbar_basic_examples():
    """Test basic navbar utilities."""
    # Basic navbar
    assert str(navbar) == "navbar"
    assert str(navbar_start) == "navbar-start"
    assert str(navbar_center) == "navbar-center"
    assert str(navbar_end) == "navbar-end"
    
    # navbar with modifiers
    assert str(navbar.hover) == "hover:navbar"
    assert str(navbar.md) == "md:navbar"
    assert str(navbar.dark) == "dark:navbar"

# Run the tests
test_navbar_basic_examples()

---

source

test_navbar_title_only_fasthtml_examples

 test_navbar_title_only_fasthtml_examples ()

Test navbar with title only from daisyUI v5 documentation.

def test_navbar_title_only_fasthtml_examples():
    """Test navbar with title only from daisyUI v5 documentation."""
    from fasthtml.common import Div, A
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles
    
    # Navbar with title only
    navbar_title_only = Div(
        A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_title_only.tag == "div"
    assert "navbar" in navbar_title_only.attrs['class']
    assert "bg-base-100" in navbar_title_only.attrs['class']
    assert "shadow-sm" in navbar_title_only.attrs['class']
    
    # Verify title link
    title_link = navbar_title_only.children[0]
    assert title_link.tag == "a"
    assert "btn" in title_link.attrs['class']
    assert "btn-ghost" in title_link.attrs['class']
    assert "text-xl" in title_link.attrs['class']
    assert title_link.children[0] == "daisyUI"
    
    return navbar_title_only

# Run the tests
test_navbar_title_only_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a></div>

test_func = test_navbar_title_only_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_with_title_and_icon_fasthtml_examples

 test_navbar_with_title_and_icon_fasthtml_examples ()

Test navbar with title and icon from daisyUI v5 documentation.

def test_navbar_with_title_and_icon_fasthtml_examples():
    """Test navbar with title and icon from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Button
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.svg import stroke
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles, btn_modifiers
    
    # Create menu dots icon
    menu_dots_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(display_tw.inline_block, h._5, w._5, stroke.current)
    )
    
    # Navbar with title and icon
    navbar_with_icon = Div(
        Div(
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=combine_classes(flex._1)
        ),
        Div(
            Button(
                menu_dots_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=combine_classes(flex.none)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_with_icon.tag == "div"
    assert "navbar" in navbar_with_icon.attrs['class']
    
    # Verify flex-1 div with title
    flex_1_div = navbar_with_icon.children[0]
    assert flex_1_div.tag == "div"
    assert "flex-1" in flex_1_div.attrs['class']
    assert flex_1_div.children[0].tag == "a"
    assert flex_1_div.children[0].children[0] == "daisyUI"
    
    # Verify flex-none div with button
    flex_none_div = navbar_with_icon.children[1]
    assert flex_none_div.tag == "div"
    assert "flex-none" in flex_none_div.attrs['class']
    button = flex_none_div.children[0]
    assert button.tag == "button"
    assert "btn" in button.attrs['class']
    assert "btn-square" in button.attrs['class']
    assert "btn-ghost" in button.attrs['class']
    assert button.children[0].tag == "svg"
    
    return navbar_with_icon

# Run the tests
test_navbar_with_title_and_icon_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="flex-none">
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="inline-block h-5 w-5 stroke-current"><path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>  </div>
</div>

test_func = test_navbar_with_title_and_icon_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_with_icons_fasthtml_examples

 test_navbar_with_icons_fasthtml_examples ()

Test navbar with icon at start and end from daisyUI v5 documentation.

def test_navbar_with_icons_fasthtml_examples():
    """Test navbar with icon at start and end from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Button
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.svg import stroke
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles, btn_modifiers
    
    # Create hamburger menu icon
    hamburger_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M4 6h16M4 12h16M4 18h16"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(display_tw.inline_block, h._5, w._5, stroke.current)
    )
    
    # Create menu dots icon
    menu_dots_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(display_tw.inline_block, h._5, w._5, stroke.current)
    )
    
    # Navbar with icon at start and end
    navbar_with_icons = Div(
        Div(
            Button(
                hamburger_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=combine_classes(flex.none)
        ),
        Div(
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=combine_classes(flex._1)
        ),
        Div(
            Button(
                menu_dots_icon,
                cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
            ),
            cls=combine_classes(flex.none)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_with_icons.tag == "div"
    assert "navbar" in navbar_with_icons.attrs['class']
    assert len(navbar_with_icons.children) == 3
    
    # Verify start button
    start_div = navbar_with_icons.children[0]
    assert start_div.tag == "div"
    assert "flex-none" in start_div.attrs['class']
    start_button = start_div.children[0]
    assert start_button.tag == "button"
    assert "btn-square" in start_button.attrs['class']
    assert start_button.children[0].tag == "svg"
    
    # Verify center title
    center_div = navbar_with_icons.children[1]
    assert center_div.tag == "div"
    assert "flex-1" in center_div.attrs['class']
    assert center_div.children[0].tag == "a"
    assert center_div.children[0].children[0] == "daisyUI"
    
    # Verify end button
    end_div = navbar_with_icons.children[2]
    assert end_div.tag == "div"
    assert "flex-none" in end_div.attrs['class']
    end_button = end_div.children[0]
    assert end_button.tag == "button"
    assert "btn-square" in end_button.attrs['class']
    assert end_button.children[0].tag == "svg"
    
    return navbar_with_icons

# Run the tests
test_navbar_with_icons_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-none">
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="inline-block h-5 w-5 stroke-current"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>  </div>
  <div class="flex-1">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="flex-none">
<button class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="inline-block h-5 w-5 stroke-current"><path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>  </div>
</div>

test_func = test_navbar_with_icons_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_with_menu_fasthtml_examples

 test_navbar_with_menu_fasthtml_examples ()

Test navbar with menu and submenu from daisyUI v5 documentation.

def test_navbar_with_menu_fasthtml_examples():
    """Test navbar with menu and submenu from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Ul, Li, Details, Summary
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles
    from cjm_fasthtml_daisyui.components.navigation.menu import menu, menu_directions
    
    # Navbar with menu and submenu
    navbar_with_menu = Div(
        Div(
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=combine_classes(flex._1)
        ),
        Div(
            Ul(
                Li(A("Link")),
                Li(
                    Details(
                        Summary("Parent"),
                        Ul(
                            Li(A("Link 1")),
                            Li(A("Link 2")),
                            cls=combine_classes(bg_dui.base_100, rounded.t.none, p._2)
                        )
                    )
                ),
                cls=combine_classes(menu, menu_directions.horizontal, p.x._1)
            ),
            cls=combine_classes(flex.none)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_with_menu.tag == "div"
    assert "navbar" in navbar_with_menu.attrs['class']
    
    # Verify title div
    title_div = navbar_with_menu.children[0]
    assert title_div.tag == "div"
    assert "flex-1" in title_div.attrs['class']
    assert title_div.children[0].children[0] == "daisyUI"
    
    # Verify menu div
    menu_div = navbar_with_menu.children[1]
    assert menu_div.tag == "div"
    assert "flex-none" in menu_div.attrs['class']
    
    # Verify menu ul
    menu_ul = menu_div.children[0]
    assert menu_ul.tag == "ul"
    assert "menu" in menu_ul.attrs['class']
    assert "menu-horizontal" in menu_ul.attrs['class']
    assert "px-1" in menu_ul.attrs['class']
    
    # Verify menu items
    assert len(menu_ul.children) == 2
    assert menu_ul.children[0].tag == "li"
    assert menu_ul.children[0].children[0].tag == "a"
    assert menu_ul.children[0].children[0].children[0] == "Link"
    
    # Verify submenu
    submenu_li = menu_ul.children[1]
    assert submenu_li.tag == "li"
    assert submenu_li.children[0].tag == "details"
    assert submenu_li.children[0].children[0].tag == "summary"
    assert submenu_li.children[0].children[0].children[0] == "Parent"
    
    # Verify submenu items
    submenu_ul = submenu_li.children[0].children[1]
    assert submenu_ul.tag == "ul"
    assert "bg-base-100" in submenu_ul.attrs['class']
    assert "rounded-t-none" in submenu_ul.attrs['class']
    assert "p-2" in submenu_ul.attrs['class']
    assert len(submenu_ul.children) == 2
    
    return navbar_with_menu

# Run the tests
test_navbar_with_menu_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li>
<a href="#">Link</a>      </li>
      <li>
<details><summary>Parent</summary>          <ul class="bg-base-100 rounded-t-none p-2">
            <li>
<a href="#">Link 1</a>            </li>
            <li>
<a href="#">Link 2</a>            </li>
          </ul>
</details>      </li>
    </ul>
  </div>
</div>

test_func = test_navbar_with_menu_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_with_search_and_dropdown_fasthtml_examples

 test_navbar_with_search_and_dropdown_fasthtml_examples ()

Test navbar with search input and dropdown from daisyUI v5 documentation.

def test_navbar_with_search_and_dropdown_fasthtml_examples():
    """Test navbar with search input and dropdown from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Ul, Li, Span, Input, Img
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex, gap, justify
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles, btn_modifiers
    from cjm_fasthtml_daisyui.components.actions.dropdown import dropdown, dropdown_placement, dropdown_content
    from cjm_fasthtml_daisyui.components.navigation.menu import menu, menu_sizes
    from cjm_fasthtml_daisyui.components.data_display.badge import badge
    from cjm_fasthtml_daisyui.components.data_display.avatar import avatar
    from cjm_fasthtml_daisyui.components.data_input.text_input import text_input
    
    # Navbar with search input and dropdown
    navbar_search_dropdown = Div(
        Div(
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=combine_classes(flex._1)
        ),
        Div(
            Input(
                type="text",
                placeholder="Search",
                cls=combine_classes(text_input, w._24, w.auto.md)
            ),
            Div(
                Div(
                    Div(
                        Img(
                            alt="Tailwind CSS Navbar component",
                            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp",
                            cls=combine_classes(w._10, rounded.full)
                        ),
                        cls=str(w._10)
                    ),
                    tabindex="0",
                    role="button",
                    cls=combine_classes(btn, btn_styles.ghost, btn_modifiers.circle, avatar)
                ),
                Ul(
                    Li(
                        A(
                            "Profile",
                            Span("New", cls=str(badge)),
                            cls=combine_classes(justify.between)
                        )
                    ),
                    Li(A("Settings")),
                    Li(A("Logout")),
                    tabindex="0",
                    cls=combine_classes(
                        menu, menu_sizes.sm, dropdown_content,
                        bg_dui.base_100, border_radius.box,
                        z._1, m.t._3, w._52, p._2, shadow.sm
                    )
                ),
                cls=combine_classes(dropdown, dropdown_placement.end)
            ),
            cls=combine_classes(flex._, gap._2)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_search_dropdown.tag == "div"
    assert "navbar" in navbar_search_dropdown.attrs['class']
    assert "bg-base-100" in navbar_search_dropdown.attrs['class']
    assert "shadow-sm" in navbar_search_dropdown.attrs['class']
    
    # Verify title div
    title_div = navbar_search_dropdown.children[0]
    assert title_div.tag == "div"
    assert "flex-1" in title_div.attrs['class']
    assert title_div.children[0].tag == "a"
    assert title_div.children[0].children[0] == "daisyUI"
    
    # Verify search and dropdown container
    search_dropdown_div = navbar_search_dropdown.children[1]
    assert search_dropdown_div.tag == "div"
    assert "flex" in search_dropdown_div.attrs['class']
    assert "gap-2" in search_dropdown_div.attrs['class']
    
    # Verify search input
    search_input = search_dropdown_div.children[0]
    assert search_input.tag == "input"
    assert search_input.attrs['type'] == "text"
    assert search_input.attrs['placeholder'] == "Search"
    assert "input" in search_input.attrs['class']
    assert "w-24" in search_input.attrs['class']
    assert "md:w-auto" in search_input.attrs['class']
    
    # Verify dropdown
    dropdown_div = search_dropdown_div.children[1]
    assert "dropdown" in dropdown_div.attrs['class']
    assert "dropdown-end" in dropdown_div.attrs['class']
    
    # Verify avatar button
    avatar_button = dropdown_div.children[0]
    assert avatar_button.attrs['tabindex'] == "0"
    assert avatar_button.attrs['role'] == "button"
    assert "btn" in avatar_button.attrs['class']
    assert "btn-ghost" in avatar_button.attrs['class']
    assert "btn-circle" in avatar_button.attrs['class']
    assert "avatar" in avatar_button.attrs['class']
    
    # Verify avatar image container
    img_container = avatar_button.children[0]
    assert "w-10" in img_container.attrs['class']
    img_element = img_container.children[0]
    assert img_element.tag == "img"
    assert img_element.attrs['alt'] == "Tailwind CSS Navbar component"
    assert "w-10" in img_element.attrs['class']
    assert "rounded-full" in img_element.attrs['class']
    
    # Verify dropdown menu
    dropdown_menu = dropdown_div.children[1]
    assert dropdown_menu.tag == "ul"
    assert dropdown_menu.attrs['tabindex'] == "0"
    assert "menu" in dropdown_menu.attrs['class']
    assert "menu-sm" in dropdown_menu.attrs['class']
    assert "dropdown-content" in dropdown_menu.attrs['class']
    
    # Verify menu items
    assert len(dropdown_menu.children) == 3
    profile_li = dropdown_menu.children[0]
    assert profile_li.children[0].tag == "a"
    assert "justify-between" in profile_li.children[0].attrs['class']
    assert profile_li.children[0].children[0] == "Profile"
    assert profile_li.children[0].children[1].tag == "span"
    assert "badge" in profile_li.children[0].children[1].attrs['class']
    assert profile_li.children[0].children[1].children[0] == "New"
    
    return navbar_search_dropdown

# Run the tests
test_navbar_with_search_and_dropdown_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="flex-- gap-2">
    <input type="text" placeholder="Search" class="input w-24 md:w-auto">
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
        <div class="w-10">
<img alt="Tailwind CSS Navbar component" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" class="w-10 rounded-full">        </div>
      </div>
      <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow-sm">
        <li>
<a href="#" class="justify-between">Profile<span class="badge">New</span></a>        </li>
        <li>
<a href="#">Settings</a>        </li>
        <li>
<a href="#">Logout</a>        </li>
      </ul>
    </div>
  </div>
</div>

test_func = test_navbar_with_search_and_dropdown_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples

 test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples ()

Test navbar with icon, indicator and dropdown from daisyUI v5 documentation.

def test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples():
    """Test navbar with icon, indicator and dropdown from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Ul, Li, Span, Button, Img
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex, justify
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles, btn_modifiers, btn_colors
    from cjm_fasthtml_daisyui.components.actions.dropdown import dropdown, dropdown_placement, dropdown_content
    from cjm_fasthtml_daisyui.components.navigation.menu import menu, menu_sizes
    from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_sizes
    from cjm_fasthtml_daisyui.components.data_display.avatar import avatar
    from cjm_fasthtml_daisyui.components.layout.indicator import indicator, indicator_item
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body, card_actions, card_sizes
    
    # Create shopping cart icon
    cart_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        cls=combine_classes(h._5, w._5),
        fill="none",
        viewBox="0 0 24 24",
        stroke="currentColor"
    )
    
    # Navbar with icon, indicator and dropdown
    navbar_icon_indicator = Div(
        Div(
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=combine_classes(flex._1)
        ),
        Div(
            # Shopping cart dropdown
            Div(
                Div(
                    Div(
                        cart_icon,
                        Span("8", cls=combine_classes(badge, badge_sizes.sm, indicator_item)),
                        cls=str(indicator)
                    ),
                    tabindex="0",
                    role="button",
                    cls=combine_classes(btn, btn_styles.ghost, btn_modifiers.circle)
                ),
                Div(
                    Div(
                        Span("8 Items", cls=combine_classes(font_size.lg, font_weight.bold)),
                        Span("Subtotal: $999", cls=str(text_dui.info)),
                        Div(
                            Button("View cart", cls=combine_classes(btn, btn_colors.primary, btn_modifiers.block)),
                            cls=str(card_actions)
                        ),
                        cls=str(card_body)
                    ),
                    tabindex="0",
                    cls=combine_classes(
                        card, card_sizes.sm, dropdown_content,
                        bg_dui.base_100, z._1, m.t._3, w._52, shadow.sm
                    )
                ),
                cls=combine_classes(dropdown, dropdown_placement.end)
            ),
            # Avatar dropdown
            Div(
                Div(
                    Div(
                        Img(
                            alt="Tailwind CSS Navbar component",
                            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp",
                            cls=combine_classes(w._10, rounded.full)
                        ),
                        cls=str(w._10)
                    ),
                    tabindex="0",
                    role="button",
                    cls=combine_classes(btn, btn_styles.ghost, btn_modifiers.circle, avatar)
                ),
                Ul(
                    Li(
                        A(
                            "Profile",
                            Span("New", cls=str(badge)),
                            cls=combine_classes(justify.between)
                        )
                    ),
                    Li(A("Settings")),
                    Li(A("Logout")),
                    tabindex="0",
                    cls=combine_classes(
                        menu, menu_sizes.sm, dropdown_content,
                        bg_dui.base_100, border_radius.box,
                        z._1, m.t._3, w._52, p._2, shadow.sm
                    )
                ),
                cls=combine_classes(dropdown, dropdown_placement.end)
            ),
            cls=combine_classes(flex.none)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_icon_indicator.tag == "div"
    assert "navbar" in navbar_icon_indicator.attrs['class']
    assert "bg-base-100" in navbar_icon_indicator.attrs['class']
    assert "shadow-sm" in navbar_icon_indicator.attrs['class']
    
    # Verify title div
    title_div = navbar_icon_indicator.children[0]
    assert title_div.tag == "div"
    assert "flex-1" in title_div.attrs['class']
    assert title_div.children[0].tag == "a"
    assert title_div.children[0].children[0] == "daisyUI"
    
    # Verify flex-none container with two dropdowns
    dropdowns_div = navbar_icon_indicator.children[1]
    assert dropdowns_div.tag == "div"
    assert "flex-none" in dropdowns_div.attrs['class']
    assert len(dropdowns_div.children) == 2
    
    # Verify shopping cart dropdown
    cart_dropdown = dropdowns_div.children[0]
    assert "dropdown" in cart_dropdown.attrs['class']
    assert "dropdown-end" in cart_dropdown.attrs['class']
    
    # Verify cart button with indicator
    cart_button = cart_dropdown.children[0]
    assert cart_button.attrs['tabindex'] == "0"
    assert cart_button.attrs['role'] == "button"
    assert "btn" in cart_button.attrs['class']
    assert "btn-ghost" in cart_button.attrs['class']
    assert "btn-circle" in cart_button.attrs['class']
    
    # Verify indicator with badge
    indicator_div = cart_button.children[0]
    assert "indicator" in indicator_div.attrs['class']
    assert indicator_div.children[0].tag == "svg"  # Cart icon
    indicator_badge = indicator_div.children[1]
    assert "badge" in indicator_badge.attrs['class']
    assert "badge-sm" in indicator_badge.attrs['class']
    assert "indicator-item" in indicator_badge.attrs['class']
    assert indicator_badge.children[0] == "8"
    
    # Verify cart dropdown content (card)
    cart_content = cart_dropdown.children[1]
    assert cart_content.attrs['tabindex'] == "0"
    assert "card" in cart_content.attrs['class']
    assert "card-sm" in cart_content.attrs['class']  # Using card-compact
    assert "dropdown-content" in cart_content.attrs['class']
    
    # Verify cart card body
    cart_body = cart_content.children[0]
    assert "card-body" in cart_body.attrs['class']
    assert cart_body.children[0].tag == "span"
    assert "text-lg" in cart_body.children[0].attrs['class']
    assert "font-bold" in cart_body.children[0].attrs['class']
    assert cart_body.children[0].children[0] == "8 Items"
    assert cart_body.children[1].tag == "span"
    assert "text-info" in cart_body.children[1].attrs['class']
    assert cart_body.children[1].children[0] == "Subtotal: $999"
    
    # Verify view cart button
    cart_actions = cart_body.children[2]
    assert "card-actions" in cart_actions.attrs['class']
    view_cart_btn = cart_actions.children[0]
    assert view_cart_btn.tag == "button"
    assert "btn" in view_cart_btn.attrs['class']
    assert "btn-primary" in view_cart_btn.attrs['class']
    assert "btn-block" in view_cart_btn.attrs['class']
    assert view_cart_btn.children[0] == "View cart"
    
    # Verify avatar dropdown
    avatar_dropdown = dropdowns_div.children[1]
    assert "dropdown" in avatar_dropdown.attrs['class']
    assert "dropdown-end" in avatar_dropdown.attrs['class']
    
    # Verify avatar button
    avatar_button = avatar_dropdown.children[0]
    assert "btn" in avatar_button.attrs['class']
    assert "btn-ghost" in avatar_button.attrs['class']
    assert "btn-circle" in avatar_button.attrs['class']
    assert "avatar" in avatar_button.attrs['class']
    
    # Verify avatar dropdown menu
    avatar_menu = avatar_dropdown.children[1]
    assert avatar_menu.tag == "ul"
    assert "menu" in avatar_menu.attrs['class']
    assert "menu-sm" in avatar_menu.attrs['class']
    assert len(avatar_menu.children) == 3
    
    return navbar_icon_indicator

# Run the tests
test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="flex-none">
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
        <div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" class="h-5 w-5"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="badge badge-sm indicator-item">8</span>        </div>
      </div>
      <div tabindex="0" class="card card-sm dropdown-content bg-base-100 z-1 mt-3 w-52 shadow-sm">
        <div class="card-body">
<span class="text-lg font-bold">8 Items</span><span class="text-info">Subtotal: $999</span>          <div class="card-actions">
<button class="btn btn-primary btn-block">View cart</button>          </div>
        </div>
      </div>
    </div>
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
        <div class="w-10">
<img alt="Tailwind CSS Navbar component" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" class="w-10 rounded-full">        </div>
      </div>
      <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow-sm">
        <li>
<a href="#" class="justify-between">Profile<span class="badge">New</span></a>        </li>
        <li>
<a href="#">Settings</a>        </li>
        <li>
<a href="#">Logout</a>        </li>
      </ul>
    </div>
  </div>
</div>

test_func = test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_with_dropdown_center_logo_fasthtml_examples

 test_navbar_with_dropdown_center_logo_fasthtml_examples ()

Test navbar with dropdown, center logo and icon from daisyUI v5 documentation.

def test_navbar_with_dropdown_center_logo_fasthtml_examples():
    """Test navbar with dropdown, center logo and icon from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Button, Ul, Li, Span
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles, btn_modifiers
    from cjm_fasthtml_daisyui.components.actions.dropdown import dropdown, dropdown_content
    from cjm_fasthtml_daisyui.components.navigation.menu import menu, menu_sizes
    from cjm_fasthtml_daisyui.components.layout.indicator import indicator, indicator_item
    from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_sizes, badge_colors
    
    # Create hamburger menu icon
    hamburger_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M4 6h16M4 12h16M4 18h7"
        ),
        xmlns="http://www.w3.org/2000/svg",
        cls=combine_classes(h._5, w._5),
        fill="none",
        viewBox="0 0 24 24",
        stroke="currentColor"
    )
    
    # Create search icon
    search_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        cls=combine_classes(h._5, w._5),
        fill="none",
        viewBox="0 0 24 24",
        stroke="currentColor"
    )
    
    # Create notification icon
    notification_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
        ),
        xmlns="http://www.w3.org/2000/svg",
        cls=combine_classes(h._5, w._5),
        fill="none",
        viewBox="0 0 24 24",
        stroke="currentColor"
    )
    
    # Navbar with dropdown, center logo and icon
    navbar_dropdown_center = Div(
        Div(
            Div(
                Div(
                    hamburger_icon,
                    tabindex="0",
                    role="button",
                    cls=combine_classes(btn, btn_styles.ghost, btn_modifiers.circle)
                ),
                Ul(
                    Li(A("Homepage")),
                    Li(A("Portfolio")),
                    Li(A("About")),
                    tabindex="0",
                    cls=combine_classes(
                        menu, menu_sizes.sm, dropdown_content,
                        bg_dui.base_100, border_radius.box,
                        z._1, m.t._3, w._52, p._2, shadow.sm
                    )
                ),
                cls=str(dropdown)
            ),
            cls=str(navbar_start)
        ),
        Div(
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=str(navbar_center)
        ),
        Div(
            Button(
                search_icon,
                cls=combine_classes(btn, btn_styles.ghost, btn_modifiers.circle)
            ),
            Button(
                Div(
                    notification_icon,
                    Span(cls=combine_classes(badge, badge_sizes.xs, badge_colors.primary, indicator_item)),
                    cls=str(indicator)
                ),
                cls=combine_classes(btn, btn_styles.ghost, btn_modifiers.circle)
            ),
            cls=str(navbar_end)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert navbar_dropdown_center.tag == "div"
    assert "navbar" in navbar_dropdown_center.attrs['class']
    
    # Verify navbar-start with dropdown
    start_div = navbar_dropdown_center.children[0]
    assert "navbar-start" in start_div.attrs['class']
    dropdown_div = start_div.children[0]
    assert "dropdown" in dropdown_div.attrs['class']
    
    # Verify navbar-center with logo
    center_div = navbar_dropdown_center.children[1]
    assert "navbar-center" in center_div.attrs['class']
    assert center_div.children[0].children[0] == "daisyUI"
    
    # Verify navbar-end with buttons
    end_div = navbar_dropdown_center.children[2]
    assert "navbar-end" in end_div.attrs['class']
    assert len(end_div.children) == 2
    
    # Verify notification button with indicator
    notification_btn = end_div.children[1]
    assert notification_btn.tag == "button"
    indicator_div = notification_btn.children[0]
    assert "indicator" in indicator_div.attrs['class']
    indicator_badge = indicator_div.children[1]
    assert "badge" in indicator_badge.attrs['class']
    assert "badge-xs" in indicator_badge.attrs['class']
    assert "badge-primary" in indicator_badge.attrs['class']
    assert "indicator-item" in indicator_badge.attrs['class']
    
    return navbar_dropdown_center

# Run the tests
test_navbar_with_dropdown_center_logo_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" class="h-5 w-5"><path d="M4 6h16M4 12h16M4 18h7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>      </div>
      <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow-sm">
        <li>
<a href="#">Homepage</a>        </li>
        <li>
<a href="#">Portfolio</a>        </li>
        <li>
<a href="#">About</a>        </li>
      </ul>
    </div>
  </div>
  <div class="navbar-center">
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="navbar-end">
<button class="btn btn-ghost btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" class="h-5 w-5"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button class="btn btn-ghost btn-circle">      <div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" class="h-5 w-5"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="badge badge-xs badge-primary indicator-item"></span>      </div>
</button>  </div>
</div>

test_func = test_navbar_with_dropdown_center_logo_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_responsive_fasthtml_examples

 test_navbar_responsive_fasthtml_examples ()

Test responsive navbar from daisyUI v5 documentation.

def test_navbar_responsive_fasthtml_examples():
    """Test responsive navbar from daisyUI v5 documentation."""
    from fasthtml.common import Div, A, Ul, Li, Details, Summary, Button
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z, display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_display
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles
    from cjm_fasthtml_daisyui.components.actions.dropdown import dropdown, dropdown_content
    from cjm_fasthtml_daisyui.components.navigation.menu import menu, menu_sizes, menu_directions
    
    # Create hamburger menu icon
    hamburger_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M4 6h16M4 12h8m-8 6h16"
        ),
        xmlns="http://www.w3.org/2000/svg",
        cls=combine_classes(h._5, w._5),
        fill="none",
        viewBox="0 0 24 24",
        stroke="currentColor"
    )
    
    # Responsive navbar
    responsive_navbar = Div(
        Div(
            Div(
                Div(
                    hamburger_icon,
                    tabindex="0",
                    role="button",
                    cls=combine_classes(btn, btn_styles.ghost, display_tw.hidden.lg)
                ),
                Ul(
                    Li(A("Item 1")),
                    Li(
                        A("Parent"),
                        Ul(
                            Li(A("Submenu 1")),
                            Li(A("Submenu 2")),
                            cls=str(p._2)
                        )
                    ),
                    Li(A("Item 3")),
                    tabindex="0",
                    cls=combine_classes(
                        menu, menu_sizes.sm, dropdown_content,
                        bg_dui.base_100, border_radius.box,
                        z._1, m.t._3, w._52, p._2, shadow.sm
                    )
                ),
                cls=str(dropdown)
            ),
            A("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
            cls=str(navbar_start)
        ),
        Div(
            Ul(
                Li(A("Item 1")),
                Li(
                    Details(
                        Summary("Parent"),
                        Ul(
                            Li(A("Submenu 1")),
                            Li(A("Submenu 2")),
                            cls=str(p._2)
                        )
                    )
                ),
                Li(A("Item 3")),
                cls=combine_classes(menu, menu_directions.horizontal, p.x._1)
            ),
            cls=combine_classes(navbar_center, display_tw.hidden, flex_display.lg)
        ),
        Div(
            A("Button", cls=str(btn)),
            cls=str(navbar_end)
        ),
        cls=combine_classes(navbar, bg_dui.base_100, shadow.sm)
    )
    
    # Verify structure
    assert responsive_navbar.tag == "div"
    assert "navbar" in responsive_navbar.attrs['class']
    
    # Verify navbar-start with dropdown
    start_div = responsive_navbar.children[0]
    assert "navbar-start" in start_div.attrs['class']
    dropdown_div = start_div.children[0]
    assert "dropdown" in dropdown_div.attrs['class']
    
    # Verify dropdown button is hidden on large screens
    dropdown_button = dropdown_div.children[0]
    assert "lg:hidden" in dropdown_button.attrs['class']
    
    # Verify navbar-center with horizontal menu (hidden on small, flex on large)
    center_div = responsive_navbar.children[1]
    assert "navbar-center" in center_div.attrs['class']
    assert "hidden" in center_div.attrs['class']
    assert "lg:flex" in center_div.attrs['class']
    
    # Verify navbar-end with button
    end_div = responsive_navbar.children[2]
    assert "navbar-end" in end_div.attrs['class']
    assert end_div.children[0].tag == "a"
    assert "btn" in end_div.children[0].attrs['class']
    assert end_div.children[0].children[0] == "Button"
    
    return responsive_navbar

# Run the tests
test_navbar_responsive_fasthtml_examples()

<div class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" class="h-5 w-5"><path d="M4 6h16M4 12h8m-8 6h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>      </div>
      <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow-sm">
        <li>
<a href="#">Item 1</a>        </li>
        <li>
<a href="#">Parent</a>          <ul class="p-2">
            <li>
<a href="#">Submenu 1</a>            </li>
            <li>
<a href="#">Submenu 2</a>            </li>
          </ul>
        </li>
        <li>
<a href="#">Item 3</a>        </li>
      </ul>
    </div>
<a href="#" class="btn btn-ghost text-xl">daisyUI</a>  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<details><summary>Parent</summary>          <ul class="p-2">
            <li>
<a href="#">Submenu 1</a>            </li>
            <li>
<a href="#">Submenu 2</a>            </li>
          </ul>
</details>      </li>
      <li>
<a href="#">Item 3</a>      </li>
    </ul>
  </div>
  <div class="navbar-end">
<a href="#" class="btn">Button</a>  </div>
</div>

test_func = test_navbar_responsive_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_navbar_colors_fasthtml_examples

 test_navbar_colors_fasthtml_examples ()

Test navbar with colors from daisyUI v5 documentation.

def test_navbar_colors_fasthtml_examples():
    """Test navbar with colors from daisyUI v5 documentation."""
    from fasthtml.common import Div, Button
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles
    
    # Navbar with neutral color
    navbar_neutral = Div(
        Button("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
        cls=combine_classes(navbar, bg_dui.neutral, text_dui.neutral_content)
    )
    
    # Verify neutral navbar
    assert navbar_neutral.tag == "div"
    assert "navbar" in navbar_neutral.attrs['class']
    assert "bg-neutral" in navbar_neutral.attrs['class']
    assert "text-neutral-content" in navbar_neutral.attrs['class']
    assert navbar_neutral.children[0].tag == "button"
    assert navbar_neutral.children[0].children[0] == "daisyUI"
    
    # Navbar with base-300 color
    navbar_base300 = Div(
        Button("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
        cls=combine_classes(navbar, bg_dui.base_300)
    )
    
    # Verify base-300 navbar
    assert "navbar" in navbar_base300.attrs['class']
    assert "bg-base-300" in navbar_base300.attrs['class']
    
    # Navbar with primary color
    navbar_primary = Div(
        Button("daisyUI", cls=combine_classes(btn, btn_styles.ghost, font_size.xl)),
        cls=combine_classes(navbar, bg_dui.primary, text_dui.primary_content)
    )
    
    # Verify primary navbar
    assert "navbar" in navbar_primary.attrs['class']
    assert "bg-primary" in navbar_primary.attrs['class']
    assert "text-primary-content" in navbar_primary.attrs['class']
    
    # Return all color variations
    return Div(
        navbar_neutral,
        navbar_base300,
        navbar_primary
    )

# Run the tests
test_navbar_colors_fasthtml_examples()

<div>
  <div class="navbar bg-neutral text-neutral-content">
<button class="btn btn-ghost text-xl">daisyUI</button>  </div>
  <div class="navbar bg-base-300">
<button class="btn btn-ghost text-xl">daisyUI</button>  </div>
  <div class="navbar bg-primary text-primary-content">
<button class="btn btn-ghost text-xl">daisyUI</button>  </div>
</div>

test_func = test_navbar_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()