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")