Navbar

Navbar is Faststrap's Bootstrap-native responsive navigation shell.

It handles:

• brand content
• automatic mobile collapse/toggler wiring
• simple navigation items through items=[...]
• mixed custom content when you need more than plain links

Bootstrap Reference

Bootstrap 5 Navbar

Quick Start

from faststrap import Button, Navbar, ThemeToggle

Navbar(
    brand="Faststrap",
    items=[
        ("Home", "/"),
        ("Docs", "/docs"),
        {"text": "Pricing", "href": "/pricing", "active": True},
        ThemeToggle(endpoint="/theme/toggle"),
        Button("Get Started", href="/signup", variant="primary", cls="ms-lg-3"),
    ],
    expand="lg",
    color_scheme="dark",
    bg="primary",
)

Supported items Forms

items= is meant for common navbar composition and now supports:

1. Strings

Navbar(brand="App", items=["Home", "Docs", "Pricing"])

These render as standard nav-item / nav-link pairs with href="#".

1. Tuples

Navbar(
    brand="App",
    items=[
        ("Home", "/"),
        ("Docs", "/docs"),
        ("Pricing", "/pricing", True),  # active item
    ],
)

Tuple format is:

• (text, href)

• (text, href, active)

• Dictionaries

Navbar(
    brand="App",
    items=[
        {"text": "Home", "href": "/"},
        {"text": "Docs", "href": "/docs", "active": True},
        {"text": "Pricing", "href": "/pricing", "cls": "fw-semibold"},
        {"text": "Disabled", "href": "#", "disabled": True},
    ],
)

Supported keys:

• text
• href
• active
• disabled
• cls for the link

• item_cls for the nav-item wrapper

• Raw/custom children

If an item is already a custom element, Faststrap preserves it instead of forcing it into plain-link markup.

This lets you mix standard nav links with:

• ThemeToggle
• CTA buttons
• search forms
• custom dropdown wrappers

How Grouping Works

Simple link-style items are automatically grouped into a Bootstrap navbar-nav wrapper.

Custom items are preserved outside that wrapper so mixed compositions still work cleanly.

That means this:

Navbar(
    brand="Faststrap",
    items=[
        ("Home", "/"),
        ("Docs", "/docs"),
        Button("Start", href="/signup", variant="primary", cls="ms-lg-3"),
    ],
)

produces the correct Bootstrap navigation structure without making you manually build navbar-nav.

When To Use Raw Composition

Use Navbar(items=[...]) for normal navigation bars.

Drop to raw/custom composition only when you need a more unusual structure such as:

• multiple nav groups
• highly customized action rails
• custom collapse content layout
• premium marketing navbars with special wrappers

For those cases, NavbarModern or direct child composition is still a good option.

Common Patterns

Sticky Navbar

Navbar(
    brand="Faststrap",
    items=[("Home", "/"), ("Docs", "/docs")],
    sticky="top",
    expand="lg",
)

Light Navbar

Navbar(
    brand="Faststrap",
    items=[("Home", "/"), ("Docs", "/docs")],
    color_scheme="light",
    bg="light",
)

Dark Navbar

Navbar(
    brand="Faststrap",
    items=[("Home", "/"), ("Docs", "/docs")],
    color_scheme="dark",
    bg="dark",
)

Mixed Links + Actions

Navbar(
    brand="Faststrap",
    items=[
        ("Components", "/components"),
        ("Showcase", "/showcase"),
        ThemeToggle(endpoint="/theme/toggle", cls="ms-lg-3"),
        Button("GitHub", href="https://github.com/Faststrap-org/Faststrap", cls="ms-lg-2"),
    ],
    expand="lg",
)

Key Parameters

Parameter	Purpose
brand	Brand text, logo, or custom element
items	Common navbar items and actions
brand_href	Brand link target
color_scheme	Bootstrap navbar text scheme
bg	Bootstrap background variant
expand	Collapse breakpoint
sticky	Sticky positioning
fixed	Fixed positioning
container	Container wrapper behavior

Notes

• items= is no longer a known workaround path; it is the preferred API for standard navbars.
• For highly branded/premium navbars, use NavbarModern or custom child composition on top of Navbar.

faststrap.components.navigation.navbar.Navbar(*children, items=None, brand=None, brand_href='/', variant=UNSET, color_scheme=UNSET, bg=UNSET, expand=UNSET, sticky=UNSET, fixed=UNSET, container=UNSET, **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)	UNSET
color_scheme	str | None	Color scheme (light or dark text)	UNSET
bg	str | None	Background color class	UNSET
expand	ExpandType | None	Breakpoint where navbar expands	UNSET
sticky	str | None	Stick to top or bottom	UNSET
fixed	str | None	Fix to top or bottom	UNSET
container	bool | str | None	Wrap in container	UNSET
**kwargs	Any	Additional HTML attributes	{}