Navbar
Product Navbar with Mega Menu
A SaaS platform header: top-level groups open into a panel of link columns and a promo card. On a wide layout the panel also opens on hover after an intent delay; on a narrow one the same groups fold into an accordion.
What you can change
- groups — the columns and their notes; links — direct links without a disclosure
- promo — a release or offer card; it can be dropped from any group
- brand, actionLabel — the content; tone — a white or graphite surface
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/navbar-004?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
One file, zero dependencies, a client component. The trigger is a button with aria-expanded and aria-controls, not a link: keyboard and screen reader get a proper disclosure. Groups are mutually exclusive; closing happens on Escape and on an outside click. Hover opens a panel after a 120 ms intent delay and leaving the header closes it after 180 ms — a cursor passing by opens nothing. On a wide layout the sheet is positioned from the header itself and slides out as a rounded, shadowed panel; on a narrow one the same sheet unfolds as an accordion via grid-template-rows 0fr→1fr. Links in a closed panel get tabindex=-1, so focus never falls into it. Palette --vibeui-navbar-004-*.
Tags
- navbar
- header
- mega-menu
- saas
- navigation
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…