1import {2 Menu,3 MenuTrigger,4 MenuContent,5 MenuItem,6 MenuItemGroup,7 MenuGroupLabel,8 MenuSeparator,9} from '@cerberus/react'Usage
Item 1
Item 2
NextJS Usage
To create a nav menu with NextJS, you should use the Link component from next/link combined with the asChild prop.
Grouped Menu
You can group menu items by using the MenuItemGroup component.
Group Label
Item 1
Item 2
Positions
The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
Primitives
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 |
Hades am I
Hades is also where I live
API
Menu
export interface MenuProps { positioning?: { placement: 'left' | 'right' | 'top' | 'bottom' }}| Name | Default | Description |
|---|---|---|
| positioning | null | Used to position the menu content. |
MenuTrigger
export interface MenuTriggerProps { children: React.ReactNode}| Name | Default | Description |
|---|---|---|
| children | null | The trigger element. |
MenuItem
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