A site's main navigation, with menus that open a panel of links.
$ pnpm dlx shadcn@latest add @dashral/navigation-menuInstallation
$ pnpm dlx shadcn@latest add @dashral/navigation-menuAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/navigation-menu.json
Usage
import Link from "next/link"
import { NavigationMenu } from "@/components/dashral/navigation-menu"
<NavigationMenu
linkAs={Link}
items={[
{
label: "Product",
links: [
{ label: "Analytics", description: "Dashboards that update as the data does.", href: "/analytics" },
{ label: "Billing", description: "Invoices, plans and payments.", href: "/billing" },
],
},
{ label: "Pricing", href: "/pricing" },
]}
/>Using the npm package? Import from @dashral/ui/components/navigation-menu instead, here and in the examples; the rest is the same.
Examples
Landing page header
A featured card in the panel, and the same links in a Sheet on a phone.
API reference
NavigationMenu
Also takes every prop of Radix Navigation Menu(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
items | NavigationMenuItem[]Required. A link { label, href, active?, external? }; a menu { label, links: { label, href, description?, icon?, external?, active? }[], columns?: 1 | 2, featured?, footer? }; or a panel of your own { label, content }. | — |
linkAs | ElementTypeYour router's link, for every href. | "a" |
align | "start" | "center"Where the panel opens under the bar. | "start" |
aria-label | stringNames the navigation landmark. | "Navigation" |
value / onValueChange | stringThe open menu, controlled. | — |
classNames | { list, trigger, viewport }Classes for each part. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Keyboard
| Keys | Action |
|---|---|
| Tab | Move through the bar's items, and into an open panel |
| EnterorSpaceor↓ | Open a menu |
| Escape | Close the menu, back to its trigger |
Accessibility
- A <nav> landmark; menus open on hover and on the keyboard, and the current page's link has aria-current="page".
- On a phone, give the same links in a Sheet: a hover menu doesn't suit a touch screen.
Motion
- One panel grows and shrinks to fit each menu, and the links slide in from the side you came from (reversed in Arabic).