Navbar

The Navbar is a responsive meta-component that serves as a navigation header for your application. It supports branding, links, dropdowns, and forms (like search).

Bootstrap Reference

Bootstrap 5 Navbar

---

Quick Start

Live Preview

Navbar(
    NavbarBrand("🚀 FastStrap", href="/"),
    NavItem("Home", href="/"),
    NavItem("Docs", href="/docs"),
    NavItem("Pricing", href="/pricing"),
    expand="lg",
    variant="dark",
    bg_variant="primary"
)

---

Visual Examples & Use Cases

1. Positioning & Sticky

Keep the navigation visible while scrolling using sticky="top" or fixed="top".

Navbar(..., sticky="top") # Pushes content down
Navbar(..., fixed="top")  # Floats over content

2. Dark vs Light Themes

Match your application's aesthetic.

Live Preview

# Dark brand: Primary background, light text
Navbar(NavbarBrand("Dark Brand"), variant="dark", bg_variant="primary")

# Light brand: Light background, dark text
Navbar(NavbarBrand("Light Brand"), variant="light", bg_variant="light")

3. Adding a Search Form

Navbars are common places for search inputs.

Live Preview

Navbar(
    NavbarBrand("My App"),
    Form(
        Input("search", placeholder="Search...", size="sm", cls="me-2"),
        Button("Search", variant="outline-success", size="sm"),
        cls="d-flex"
    ),
    expand="md"
)

---

Technical Hierarchy (LLM Spec)

To build a correct Navbar, follow this nested structure:

1. Navbar (Main Container)
   • Container (Optional, for centered alignment)
     • NavbarBrand (Text or Logo)
     • NavbarToggler (Created automatically if expand is set)
     • NavbarCollapse (Parent for menu items)
       • NavItem (Single Link)
       • Dropdown (Grouped Links)

---

Parameter Reference

FastStrap Param	Type	Bootstrap Class	Description
expand	str	.navbar-expand-{val}	Responsive breakpoint: sm, md, lg, xl.
variant	str	.navbar-{variant}	Text contrast: light (dark text) or dark (light text).
bg_variant	str	.bg-{variant}	Background color (e.g., primary, white).
sticky	str	.sticky-top	Position style.
fixed	str	.fixed-top	Floating position style.

faststrap.components.navigation.navbar.Navbar(*children, items=None, brand=None, brand_href='/', variant=None, color_scheme=None, bg=None, expand=None, sticky=None, fixed=None, container=True, **kwargs)

Bootstrap Navbar component for responsive site navigation.

Parameters:

Name	Type	Description	Default
*children	Any	Navbar content	()
items	list[Any] | None	Navbar items list (links, buttons, etc.)	None
brand	Any | None	Brand text or logo	None
brand_href	str	Brand link URL (default: "/")	'/'
variant	str | None	Color scheme alias (light or dark text)	None
color_scheme	str | None	Color scheme (light or dark text)	None
bg	str | None	Background color class	None
expand	ExpandType | None	Breakpoint where navbar expands	None
sticky	str | None	Stick to top or bottom	None
fixed	str | None	Fix to top or bottom	None
container	bool | str	Wrap in container	True
**kwargs	Any	Additional HTML attributes	{}