ComponentsNavigation

Navigation Menu

A website's top navigation with dropdown and mega-menu panels, a floating glass variant, and a matching mobile sheet — all from one nav array. Admin panels use Sidebar instead.

Radix Navigation Menu, Radix Dialog (mobile) components/navigation-menu.tsx, components/accordion.tsx, styles/navigation.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { NavigationMenu, MobileNav, type SiteNavItem } from "@vamos-ui/react";

const nav: SiteNavItem[] = [
  { label: "Products", children: [{ label: "vTag", href: "/vtag", description: "NFC business cards" }] },
  { label: "Pricing", href: "/pricing" },
];

<NavigationMenu items={nav} className="max-md:hidden" />
<MobileNav items={nav} className="md:hidden" />

Keyboard: Tab between items, Enter / Space / ↓ open a panel, Tab moves into it, Escape closes and returns focus to the trigger.

Examples

Mega menu (company site)

Compose the parts: layout="featured" puts a highlight card beside the links, "grid-2" lays links in two columns. Panels slide inside one shared, animated viewport.

VamosContact

Floating glass pill

variant="floating" is the site's one permanent blur; its panel turns opaque to keep the glass budget.

Mobile menu

MobileNav opens a side sheet with groups as an accordion. Following a link closes it. Narrow the preview to see the switch.

Vamos

API

NavigationMenu

PropTypeDefault
items
Data-driven menu. Or compose NavigationMenuList children.
SiteNavItem[]—
variant
In a header, or a floating glass pill.
"bar" | "floating""bar"
viewport
One shared animated panel; false drops each panel under its trigger.
booleantrue
value · defaultValue · onValueChange
The open item (controlled / uncontrolled).
string—
delayDuration
Hover-intent delay before a panel opens (ms).
number200
aria-label
Name of the nav landmark (labels.label).
string"Main"

SiteNavItem

PropTypeDefault
label · href
Text and target (no href when it has children).
string—
description · icon
Shown on panel links.
string · ReactNode—
children
Makes the item a dropdown.
SiteNavItem[]—
layout
Panel layout.
"list" | "grid-2" | "featured""list"
featured
layout="featured": the highlight card.
{ title; description?; href; eyebrow? }—

NavigationMenuContent

PropTypeDefault
layout
Panel layout.
"list" | "grid-2" | "featured""list"
inline
Without the viewport: render as its own popover.
booleanfalse

NavigationMenuLink

PropTypeDefault
href
Required. Rendered with the app's router Link.
string—
variant
Rich panel link or a top-level link in the bar.
"panel" | "top""panel"
title · description · icon
Panel link content (title falls back to children).
ReactNode—
active
Current page; default derived from VamosProvider currentPath.
boolean—

Parts

PropTypeDefault
NavigationMenuList · NavigationMenuItem · NavigationMenuTrigger
The bar, an item, the panel toggle (chevron included).
Radix parts—
NavigationMenuGroup
A ul of links; heading is visual text, not a heading element.
{ heading? }—
NavigationMenuFeatured
Highlight card for featured panels.
{ title; description?; href; eyebrow? }—
NavigationMenuViewport · NavigationMenuIndicator
Shared panel container (rendered for you) and an optional arrow.
Radix parts—

MobileNav

PropTypeDefault
items
Required. The same array as the desktop menu.
SiteNavItem[]—
title
Sheet heading (brand).
ReactNode"Menu"
footer
Bottom of the sheet: CTA, language switch.
ReactNode—
open · defaultOpen · onOpenChange
Sheet state.
boolean—
className
Trigger button classes; hide it on desktop (md:hidden).
string—
labels
"Main", "Open menu", "Close menu", "Menu".
{ label?; open?; close?; title? }—
Previous
Navbar
Next
404