Menu

Menus let users choose from a list of destinations or actions.

1
import {
2
  Menu,
3
  MenuTrigger,
4
  MenuContent,
5
  MenuItem,
6
  MenuItemGroup,
7
  MenuGroupLabel,
8
  MenuSeparator,
9
} from '@cerberus/react'

Usage

NextJS Usage

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.

Positions

The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.

Customizing

You can customize every Menu component by passing in your own styles.

API

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.

1
import {
2
  Menu,
3
  MenuTrigger,
4
  MenuContent,
5
  MenuItem,
6
  MenuItemGroup,
7
  MenuGroupLabel,
8
  MenuSeparator,
9
} from '@cerberus/react'

Usage

NextJS Usage

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.

Positions

The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.

Customizing

You can customize every Menu component by passing in your own styles.

API

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.

1
import {
2
  Menu,
3
  MenuTrigger,
4
  MenuContent,
5
  MenuItem,
6
  MenuItemGroup,
7
  MenuGroupLabel,
8
  MenuSeparator,
9
} from '@cerberus/react'

Usage

NextJS Usage

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.

Positions

The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.

Customizing

You can customize every Menu component by passing in your own styles.

API

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.

1
import {
2
  Menu,
3
  MenuTrigger,
4
  MenuContent,
5
  MenuItem,
6
  MenuItemGroup,
7
  MenuGroupLabel,
8
  MenuSeparator,
9
} from '@cerberus/react'

Usage

NextJS Usage

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.

Positions

The Menu component accepts a positioning prop to determine where the menu will be positioned relative to the trigger. See available positions.

Customizing

You can customize every Menu component by passing in your own styles.

API

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.