Island Nav Header
Floating glass islands that tighten on scroll, with a full-screen phone menu whose links rise in turn.
Controls
<HeaderIslandNav />About
The Pro alternative to header-glass-bar, built on the library's Equalizer Menu Toggle. For brands that want the header itself to feel crafted.
Use it when
- Landing pages and product sites with up to five links.
Skip it when
- The site needs a plain, static header: use
header-glass-bar.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| brand.name | Business name | text | 40 chars | — |
| brand.descriptor | Trade line | text | 32 chars | — |
| brand.logo | Logo | image | — | — |
| brand.mark.shape | Mark shape | choice | — | — |
| brand.mark.content | Mark content | choice | — | — |
| brand.mark.glyph | Mark glyph | choice | — | — |
| brand.mark.initial | Mark initial | text | 2 chars | — |
| brand.mark.ring | Mark ring | flag | — | — |
| links | Menu | list | up to 5 | — |
| links[] | Menu link | link | 18 chars | — |
| action | Header button | action | 24 chars | — |
Variants
Islanddefault
island
One centred glass island with brand, links and action.
Split islands
split
The brand on one island at the left, links and action on another at the right.
Accessibility and motion
- Keyboard
- Brand, links, action; on phones the toggle opens a modal sheet (focus moves in, Escape closes, focus returns).
- Screen readers
- A named navigation; the sheet is a modal dialog named Menu with its own close toggle.
- Touch
- The toggle is 44 px; sheet links are full-width rows.
- Reduced motion
- The sheet appears without its rise; the island does not tighten.
Edge cases and limits
- The sheet is portalled to
bodybecause the island's backdrop filter would trap a fixed sheet. - Body scroll is locked while the sheet is open.
Related
Glass Bar Header
FreeA sticky glass header with the brand, up to five links, one action and a phone menu that needs no JavaScript.
Headers block · Server
Column Footer
FreeLinks, contact details and legal pages: the brand and a line with link columns, or one compact row.
Footers block · Server
Menu cards that turn over: photo, name and price in front; the description and tag behind.
Menus block · CSS