import { Menu, MenuTrigger, MenuContent, MenuItem, MenuItemGroup, MenuGroupLabel, MenuSeparator,} from '@cerberus/react'To create a nav menu with NextJS, you should use the Link component from next/link combined with the asChild prop.
You can group menu items by using the MenuItemGroup component.
The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.
You can utilize the primitive components or the css prop to customize the menu.
| Component | Description |
|---|---|
| MenuRoot | The context provider for the menu parts |
| MenuTrigger | The trigger that opens the menu content |
| MenuTriggerItem | The item that triggers a nested menu content |
| MenuIndicator | The indicator for the selected menu item |
| MenuPositioner | The positioning container for the menu content |
| MenuContent | The content of the menu |
| MenuItem | A single item of the menu |
| MenuItemGroup | A container for a group of menu items |
| MenuItemGroupLabel | The label for a group of menu items |
| MenuSeparator | A separator between menu items |
export interface MenuProps { positioning?: { placement: 'left' | 'right' | 'top' | 'bottom' }}| Name | Default | Description |
|---|---|---|
| positioning | null | Used to position the menu content. |
export interface MenuTriggerProps { children: React.ReactNode}| Name | Default | Description |
|---|---|---|
| children | null | The trigger element. |
export interface MenuItemProps { children: React.ReactNode value: string asChild?: boolean}| Name | Default | Description |
|---|---|---|
| children | null | The content of the menu item. |
| value | null | The value of the menu item used for selection. |
| asChild | false | Used to render the children as a child component. |
On this page