Navigation
NavigationMenu
Horizontal site navigation mixing plain links with expandable mega-menu panels that close on Escape or outside press.
Import
import { NavigationMenu } from "@zephora/react";Examples
Links and a panel
Entries with `href` render as links; entries with `content` render a toggle button and panel.
<NavigationMenu
items={[
{ label: "Docs", href: "#" },
{ label: "Blog", href: "#" },
{
label: "Product",
content: (
<div style={{ display: "grid", gap: 4 }}>
<a href="#">Analytics</a>
<a href="#">Automation</a>
<a href="#">Integrations</a>
</div>
),
},
]}
/>Mega panel
Panels take arbitrary content — columns of links, previews, anything.
<NavigationMenu
items={[
{
label: "Resources",
content: (
<div style={{ display: "flex", gap: 32 }}>
<div>
<strong>Learn</strong>
<div><a href="#">Guides</a></div>
<div><a href="#">Tutorials</a></div>
</div>
<div>
<strong>Community</strong>
<div><a href="#">Discord</a></div>
<div><a href="#">GitHub</a></div>
</div>
</div>
),
},
{ label: "Pricing", href: "#" },
]}
/>API
NavigationMenu props
| Prop | Type | Default | Description |
|---|---|---|---|
items * | Array<{ label: string; href?: string } | { label: string; content: ReactNode }> | — | Plain links (href) or expandable panels (content). |
unstyled | boolean | false | Headless mode — skips Zephora styling. |
Keyboard
| Key | Action |
|---|---|
Enter / Space | Toggles the focused panel trigger. |
Escape | Closes the open panel and returns focus to its trigger. |
Tab | Moves through links, triggers and panel content. |