# Navigation Menu
A collection of links for navigating websites.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/navigation-menu.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/navigation-menu.json)
## Preview
```tsx
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu/navigation-menu";
export function Preview() {
return (
Getting started
-
Introduction
-
Installation
-
Typography
Components
-
Alert Dialog
-
Hover Card
-
Progress
Documentation
);
}
```
## Source
### navigation-menu.tsx
```tsx
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
import { IconChevronDown } from "@tabler/icons-react";
import * as React from "react";
import { cn } from "cn";
import { navigationMenuTriggerStyle } from "./navigation-menu.variants";
function NavigationMenu({
align = "start",
className,
children,
...props
}: NavigationMenuPrimitive.Root.Props &
Pick) {
return (
{children}
);
}
function NavigationMenuList({
className,
...props
}: React.ComponentPropsWithRef) {
return (
);
}
function NavigationMenuItem({
className,
...props
}: React.ComponentPropsWithRef) {
return (
);
}
function NavigationMenuTrigger({
className,
children,
...props
}: NavigationMenuPrimitive.Trigger.Props) {
return (
{children}{" "}
);
}
function NavigationMenuContent({
className,
...props
}: NavigationMenuPrimitive.Content.Props) {
return (
);
}
function NavigationMenuPositioner({
className,
side = "bottom",
sideOffset = 8,
align = "start",
alignOffset = 0,
...props
}: NavigationMenuPrimitive.Positioner.Props) {
return (
);
}
function NavigationMenuLink({
className,
...props
}: NavigationMenuPrimitive.Link.Props) {
return (
);
}
function NavigationMenuIndicator({
className,
...props
}: React.ComponentPropsWithRef) {
return (
);
}
export {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
NavigationMenuPositioner,
};
```
### navigation-menu.variants.ts
```ts
import { cva } from "class-variance-authority";
import { cn } from "cn"
const navigationMenuTriggerBase = cn(
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted",
);
const navigationMenuTriggerConfig = {
variants: {},
compoundVariants: [],
defaultVariants: {},
} as const;
export const navigationMenuTriggerCva = cva(navigationMenuTriggerBase, {
...navigationMenuTriggerConfig,
compoundVariants: [...navigationMenuTriggerConfig.compoundVariants],
});
export const navigationMenuTriggerStyle = navigationMenuTriggerCva;
```
## Usage
Use for site chrome with top-level links and optional flyout content. Built on
[Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu).
```tsx
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/navigation-menu/navigation-menu";
export function Example() {
return (
Getting started
-
Introduction
-
Installation
Docs
);
}
```
Reuse `navigationMenuTriggerStyle()` for link items that should match trigger chrome.