import { NavigationMenu } from '@manti-ui/react';
import type { NavigationMenuItem } from '@manti-ui/react';

const items: NavigationMenuItem[] = [
  {
    value: 'products',
    label: 'Products',
    links: [
      { href: '#components', label: 'Components', description: '40+ adapters' },
      { href: '#tokens', label: 'Tokens', description: 'The design contract' },
    ],
  },
  {
    value: 'resources',
    label: 'Resources',
    links: [
      { href: '#docs', label: 'Docs', description: 'Guides & API' },
      { href: '#blog', label: 'Blog', description: 'Updates & notes' },
    ],
  },
];

export default function NavigationMenuBasic() {
  return <NavigationMenu items={items} />;
}

API

Prop	Type	Default	Description
`items`	`NavigationMenuItem[]`	—	The top-level menus. Each is `{ value, label, links }` where each link is `{ href, label, description? }`.
`value`	`string`	—	Controlled open menu value.
`defaultValue`	`string`	—	Initial open menu for uncontrolled usage.
`onValueChange`	`(value: string) => void`	—	Called whenever the open menu changes.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="navigation-menu"][data-part="root"]`	The `<nav>` wrapper.
`list`	`[data-scope="navigation-menu"][data-part="list"]`	The row of top-level triggers.
`trigger`	`[data-scope="navigation-menu"][data-part="trigger"]`	A top-level menu button that opens its dropdown.
`content`	`[data-scope="navigation-menu"][data-part="content"]`	The dropdown panel holding the links for one menu.
`link`	`[data-scope="navigation-menu"][data-part="link"]`	A single navigation link inside a dropdown.
`indicator`	`[data-scope="navigation-menu"][data-part="indicator"]`	The sliding indicator and arrow that point at the open menu.

Tokens

Token	Controls
`--manti-navigation-menu-content-min-width`	content min width

Last updated 13 September 2026