Navbar
Responsive top navigation bar. Covers transparent, solid-sticky, centered-logo, split, compact, multi-row, and announcement-bar variants with full Alpine.js scroll and mobile behaviour.
1. Solid Variants
Surface-colour navbars for standard page headers. Apply via modifier class on .nb. All carry box-shadow: var(--shadow-xs) by default to lift them off content.
nb--white — default solid (most common)
nb--surface — muted grey
nb--dark — dark surface
nb--primary — brand colour
2. Transparent → Sticky on Scroll
Transparent when at top, transitions to a solid white bar on scroll. In production, bind x-data="{ scrolled: false }" and @scroll.window="scrolled = window.scrollY > 20" on <body> or a wrapping element. The toggle below simulates both states.
Hero content below navbar
3. Frosted Glass
backdrop-filter: blur(12px) requires the navbar to be position: sticky (or fixed) with content scrolling beneath it. The demo shows the visual result.
Content behind frosted bar
4. Layout Variants
Different structural arrangements for the same nav elements.
Centered logo — links split left / right
Logo center — search left, actions right
Multi-row — announcement bar + main navbar
5. Sizes
Three height tiers. Use .nb--sm for dense admin UIs, base .nb for most sites, .nb--lg for premium / editorial brands.
nb--sm — 2.75rem (44px) — compact admin or secondary nav
default — 3.5rem (56px) — standard site nav
nb--lg — 4.25rem (68px) — premium / editorial
6. Action Slot Patterns
Common right-side action configurations. Slots accept any mix of buttons, avatars, badges, and icon buttons.
Icon-only actions (search + notifications + avatar)
E-commerce — search · wishlist · cart
Avatar + dropdown menu (Alpine.js)
7. Mobile — Hamburger + Inline Drawer
On real pages, the burger appears via a responsive breakpoint class and the drawer appends beneath the navbar. This demo forces the mobile layout. The x-collapse plugin handles the height animation.
8. States & Edge Cases
Logo-only — auth / landing (no nav links)
Long brand name — must not push links off-screen
Loading skeleton