import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  Button,
} from '@cerberus/react'
import { Strawberry } from '@cerberus/icons'

function BasicMenu() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Trigger</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="item_1">
          <Strawberry />
          Item 1
        </MenuItem>
        <MenuItem value="item_2">
          <Strawberry />
          Item 2
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

NextJS Usage

To create a nav menu with NextJS, you should use the Link component from next/link combined with the asChild prop.

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  Button,
  Logout,
} from '@cerberus/react'
import Link from '@next/link'

function BasicMenu() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Nav Menu</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="item_1" asChild>
          <Link href="/">Item 1</Link>
        </MenuItem>
        <MenuItem value="item_2" asChild>
          <Link href="/">Item 2</Link>
        </MenuItem>
        <MenuSeparator />
        <MenuItem value="item_3" asChild>
          <Link
            className={css({
              alignItems: 'center',
              colorPalette: 'danger',
              color: 'danger.text.initial',
              display: 'inline-flex',
              justifyContent: 'space-between',
              w: 'full',
            })}
            href="/"
          >
            Sign out
            <Logout />
          </Link>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

You can group menu items by using the MenuItemGroup component.

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuItemGroup,
  MenuGroupLabel,
  MenuSeparator,
  Button,
} from '@cerberus/react'

export function GroupedMenu() {
  return (
    <Menu>
      <MenuTrigger>
        <Button>Grouped Menu</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItemGroup>
          <MenuGroupLabel>Group Label</MenuGroupLabel>
          <MenuSeparator />
          <MenuItem value="item_1">Item 1</MenuItem>
          <MenuItem value="item_2">Item 2</MenuItem>
        </MenuItemGroup>
      </MenuContent>
    </Menu>
  )
}

Positions

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

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  Button,
} from '@cerberus/react'

function BottomNav() {
  return (
    <Menu
      positioning={{
        placement: 'bottom',
      }}
    >
      <MenuTrigger>
        <Button>Bottom</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem value="item_1">Item 1</MenuItem>
        <MenuItem value="item_2">Item 2</MenuItem>
      </MenuContent>
    </Menu>
  )
}

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

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  Button,
} from '@cerberus/react'

function CustomMenu() {
  return (
    <Menu>
      <MenuTrigger>
        <Button
          css={{
            color: 'black',
          }}
          palette="danger"
        >
          Hades R00lz
        </Button>
      </MenuTrigger>
      <MenuContent
        css={{
          bgColor: 'black',
          color: 'danger.text.initial',
        }}
      >
        <MenuItem
          css={{
            colorPalette: 'warning',
            _hover: {
              color: 'black',
            },
          }}
          value="item_1"
        >
          Hades am I
        </MenuItem>
        <MenuItem
          css={{
            colorPalette: 'warning',
            _hover: {
              color: 'black',
            },
          }}
          value="item_2"
        >
          Hades is also where I live
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

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

Edit this page on Github