Component reference
NavigationMenu
Grouped destinations for a product navigation bar.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import {
Card,
CardContent,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink
} from "@pimolu/react";
export function DemoExample() {
return (
<Card>
<CardContent>
<NavigationMenu aria-label="Documentation">
<NavigationMenuList>
<NavigationMenuItem value="docs">
<NavigationMenuTrigger>Documentation</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/docs" active>Overview</NavigationMenuLink>
<NavigationMenuLink href="/components/button">Components</NavigationMenuLink>
<NavigationMenuLink href="/components/code">Code & Kbd</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="resources">
<NavigationMenuTrigger>Resources</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/components/typography">Typography</NavigationMenuLink>
<NavigationMenuLink href="/components/themes">Themes</NavigationMenuLink>
<NavigationMenuLink href="/components/card">Playground</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="pricing">
<NavigationMenuLink
href="/docs"
className="pimolu-navigation-menu__trigger"
>
Pricing
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</CardContent>
</Card>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Resource directory
Real documentation destinations, with disclosure or direct-link navigation.
Direct destinations
Real documentation destinations, with disclosure or direct-link navigation.
Composition
The menu can sit inside a navbar or a page header; the panel is positioned under its item.
Usage
Use navigation links with actual destinations rather than command handlers.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluNavigationMenuProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | — | Accessible name of the navigation landmark; `aria-label` takes precedence. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
labelstring | undefinedNo default extracted.
Accessible name of the navigation landmark; `aria-label` takes precedence.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluNavigationMenuListProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLUListElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLUListElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLUListElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLUListElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluNavigationMenuItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Value shared by the trigger and its content. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLLIElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLLIElement> | undefined | — | Standard React/HTML attribute. |
valueRequiredstringNo default extracted.
Value shared by the trigger and its content.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLLIElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLLIElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluNavigationMenuTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluNavigationMenuContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluNavigationMenuLinkProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
type | string | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLAnchorElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLAnchorElement> | undefined | — | Standard React/HTML attribute. |
activeboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
typestring | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLAnchorElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLAnchorElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Label the navigation region and check keyboard opening, dismissal and focus return.