Navbar

Responsive navigation bar components with mobile support

Navigation Link

Creates an anchor element that uses HTMX to load content without full page reload.

# Example: Internal nav-link helper (used by create_navbar)
from types import SimpleNamespace

# Mock route object
mock_route = SimpleNamespace(to=lambda: "/about")

link = _create_nav_link("About Us", mock_route)
print("Navigation link:")
print(link)

Navigation link:
<a href="/about" hx-get="/about" hx-push-url="true" hx-target="#main-content">About Us</a>

Navbar Component

create_navbar


def create_navbar(
    title:str, # Application title
    nav_items:List, # List of (label, route) tuples
    home_route:Optional=None, # Optional home route for title link
    theme_selector:bool=True, # Whether to include theme selector
    target_id:str='main-content', # HTMX target container ID
    navbar_kwargs:VAR_KEYWORD
)->FT: # Navbar component

Create a responsive navigation bar with mobile dropdown menu.

Creates a DaisyUI navbar with: - Responsive design (mobile dropdown, desktop horizontal menu) - Optional theme selector - HTMX-enabled navigation links - Clickable title that links to home

# Example: Create a basic navbar
from types import SimpleNamespace

# Mock routes
home = SimpleNamespace(to=lambda: "/")
about = SimpleNamespace(to=lambda: "/about")
settings = SimpleNamespace(to=lambda: "/settings")

navbar = create_navbar(
    title="My FastHTML App",
    nav_items=[
        ("Home", home),
        ("About", about),
        ("Settings", settings)
    ],
    theme_selector=False  # Disable for this example
)

print("Navbar component:")
print(navbar)

Navbar component:
<div><div class="navbar bg-base-100 shadow-sm p-4"><div class="navbar-start gap-2"><div class="dropdown lg:hidden"><div tabindex="0" role="button" class="btn btn-ghost btn-square"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="h-5 w-5 stroke-base-content"><path d="M4 6h16M4 12h8m-8 6h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><ul tabindex="0" class="menu dropdown-content bg-base-100 rounded-box mt-3 w-52 p-2 shadow-lg"><li><a href="/" hx-get="/" hx-push-url="true" hx-target="#main-content">Home</a></li><li><a href="/about" hx-get="/about" hx-push-url="true" hx-target="#main-content">About</a></li><li><a href="/settings" hx-get="/settings" hx-push-url="true" hx-target="#main-content">Settings</a></li></ul></div><a href="/" hx-get="/" hx-push-url="/" hx-target="#main-content" class="btn btn-ghost p-0 max-w-full"><h1 class="text-xl md:text-2xl font-bold text-base-content text-wrap max-w-full">My FastHTML App</h1></a></div><div class="navbar-center hidden lg:flex"><ul class="menu menu-horizontal px-1"><li><a href="/" hx-get="/" hx-push-url="true" hx-target="#main-content">Home</a></li><li><a href="/about" hx-get="/about" hx-push-url="true" hx-target="#main-content">About</a></li><li><a href="/settings" hx-get="/settings" hx-push-url="true" hx-target="#main-content">Settings</a></li></ul></div></div></div>