Navigation menu
The main links of a site, in a `<nav>`, with optional panels that open from a trigger, such as a products mega menu. It takes people to pages; for commands, use a Menu or a Menubar.
Installation
Set up Camaleo once (Installation), then import the parts you need. Panels render in a portal and keep the skin, mode and brand of the page around them.
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@camaleo/react";Anatomy
NavigationMenu renders the <nav>; give it an aria-label. Each NavigationMenuItem holds either a NavigationMenuLink or a NavigationMenuTrigger with its NavigationMenuContent, the panel that opens below it.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above, and every panel starts closed.
Links only
When every top item is a page, you don't need panels: a bar of NavigationMenuLinks is a plain list of real links, one Tab stop each.
Products panel
Open Products. A short description under each name tells people which product fits before they click, and the icon helps them find it again next time.
Featured card in the panel
Promote one timely page, like next week's webinar, beside the regular links. Make the whole card one link so it stays one Tab stop.
Current page
Click the links. active sets aria-current="page", which screen readers announce as "current page" and the skin underlines, so it isn't shown by color alone.
Hover delay
Move the pointer across the bar. delay and closeDelay stop panels from flashing open when someone is just passing over them on the way to the page.
Vertical
For the sections of one area, like settings, stack the list down the side. orientation="vertical" switches the arrow keys to ↑ and ↓.
Named landmarks
Screen reader users jump between landmarks by name. With two navs on the page, "Main" and "Footer" tell them apart; two unnamed navs both read as "navigation".
The bar wraps rather than collapses: it has no phone layout of its own. Below about 640px, swap it for a menu button that opens a Drawer with the same links.
In context
The navigation menu sits in the header of a site or a section. These are whole pieces of UI you can copy, in the skin you picked.
Set up recurring invoices
Updated Oct 3, 2026 · 4 min read
Guidelines
"Invoices", "Clients", "Reports": each label is a page, so people know where they'll land and can open it in a new tab.
"Export CSV" and "Archive" don't take you anywhere. Put actions in a Menu or a Menubar, where they are announced as commands.
Three options with a sentence each are faster to choose from than a list of names people have to guess at.
Twelve links with no groups or descriptions turn the panel into a sitemap. Split them by topic, or link to a page that lists them.
Props
value of the item whose panel is open, for a controlled menu. null closes it.eventDetails.These are the props of NavigationMenu. NavigationMenuLink takes active (sets aria-current="page") and closeOnClick. NavigationMenuTrigger takes hideIcon, and NavigationMenuContent takes align and sideOffset. Give NavigationMenuItem a value when you control the menu.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the nav itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The root is a <nav>: give it an aria-label so it is listed by name among the page's landmarks.
- Triggers are buttons with aria-expanded; links are real <a href> elements, so middle-click and "open in new tab" work.
- Mark the page people are on with active, which sets aria-current="page".
- Hover opens a panel after delay (50 ms by default), and moving away closes it after closeDelay. Panels also open from the keyboard, so nothing depends on a mouse.