Back

Navbar

Live Preview

Resize the window to see the mobile hamburger menu appear.

Sticky Variant

Scroll me — the navbar sticks to the top of this container.

Scroll me — the navbar sticks to the top of this container.

Scroll me — the navbar sticks to the top of this container.

Scroll me — the navbar sticks to the top of this container.

Scroll me — the navbar sticks to the top of this container.

Scroll me — the navbar sticks to the top of this container.

Link States

Advanced Layout

With search bar and user menu.

Usage

Import from the navigation package. Pass a Brand and optional Actions component; children become the nav links rendered in both desktop and mobile views. The hamburger toggle is built-in — no extra Alpine JS setup needed.

@navigation.Navbar(navigation.NavbarProps{
    Sticky:   true,
    MaxWidth: "max-w-7xl", // default
    Brand:    myLogoTempl(),
    Actions:  myActionsTempl(),
}) {
    @navigation.NavbarLink(navigation.NavbarLinkProps{Href: "/",      Active: true}) { Home }
    @navigation.NavbarLink(navigation.NavbarLinkProps{Href: "/about"})               { About }
}

// Simple text brand mark helper:
@navigation.NavbarBrand("/", "My App")