Koala UI

Navbar

The bar at the top of a page. Six finished layouts: the conventional marketing bar, one with full-height tabs, a floating island, an editorial storefront, a compact app toolbar, and a dark floating capsule.

Variant 1

Variant 2

Pro

Variant 3

Pro

Variant 4

Pro

Variant 5

Pro

Variant 6

Pro

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add navbar

Layout is composition#

There is no alignment prop. A NavbarSpacer pushes the groups on either side of it apart, and a three-column grid on NavbarInner puts a group on the bar's true centreline. That is how Variants 4 and 5 place the mark and the tabs in the middle without any bar-level configuration. The one exception is linkStyle, which changes what a link is: a ghost chip floating in the bar, or a full-height tab welded to its bottom rule.

Responsive#

Below the md breakpoint the inline links collapse into a hamburger that toggles the mobile menu, while the brand and primary action stay in the bar. The storefront is the deliberate exception: its search, account, and cart icons stay visible at every width, because the cart is the one control a shopper must never have to go looking for. Narrow the frame to trigger the switch.

FAQ#

The component (in /docs/components/navbar) is the installable engine. These sections are finished bars built from it: brand, links, a dropdown, primary actions, and a mobile menu, ready to sit at the top of a page as sticky chrome.