Menu

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

Menus are used to provide a list of options to the user.
Menus can be used to navigate to different pages or perform actions.
Menus can be used in a variety of contexts within a page.

Example

Resources

Name	Resource	Status
Figma	Design Kit (Figma)	Private

On this page

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.

On this page

Use Cases

Users should be able to:
Move between navigation destinations with assistive technology
Select a particular navigation destination from a set
Get appropriate feedback based on input type documented under Interaction & style

Visual Indicators

Icons are the primary focus of the navigation and such give the dominant cue of its state. Use a filled icon for the selected destination to differentiate from the outlined icons of non-selected destinations.

Keys	Actions
Tab	Focus lands on the first navigation destination
Space / Enter	Selects the focused navigation destination, and focus moves to the newly opened section (if applicable)
Arrows	Navigate between destinations within the navigation drawer

On this page