Navbar

Responsive navigation bar components with mobile support

Navigation Link

create_nav_link

 create_nav_link (label:str, route, target_id:str='main-content')

Create a navigation link with HTMX attributes for SPA-like behavior.

	Type	Default	Details
label	str		Link text to display
route			FastHTML route object with .to() method
target_id	str	main-content	HTMX target container ID
Returns	FT		Anchor element with HTMX attributes

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

# Example: Create a navigation link
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

source

create_navbar

 create_navbar (title:str, nav_items:List[Tuple[str,Any]],
                home_route:Optional[Any]=None, theme_selector:bool=True,
                target_id:str='main-content', **navbar_kwargs)

Create a responsive navigation bar with mobile dropdown menu.

	Type	Default	Details
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
Returns	FT		Navbar component

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 mb-6 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 z-1 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>