Staffbase

Components

Menu

Menus display a list of actions or options that a user can choose. They open from a trigger and close on selection.

Stable
GitHub Figma

Anatomy

Anatomy 
import {Menu} from '@staffbase/design';

<Menu.Root>
  <Menu.Trigger />
  <Menu.Popup>
    <Menu.Group>
      <Menu.GroupLabel />
      <Menu.Item />
    </Menu.Group>
    <Menu.Separator />
    <Menu.Item />
  </Menu.Popup>
</Menu.Root>

API reference

Root

Inherits props fromBase UI Menu Root

Groups all parts of the menu and manages its open state. Rendered as non-modal by default.

Trigger

Inherits props fromBase UI Menu Trigger
Name Type Description
children
ReactNode
Opens the menu when activated. Passed as a single button element, not via a render prop.

Popup

Inherits props fromBase UI Menu Positioner

Renders the menu surface, portalled out of the DOM flow and positioned against the trigger.

Name Type Description
children
ReactNode
The menu items, groups, and separators.
side
topbottomleftrightinline-startinline-end
Which side of the trigger to position the menu against.
Default: bottom
align
startcenterend
How to align the menu against the trigger.
Default: end
container
HTMLElementRefObject<HTMLElement>
Use this instead of z-index to specify another parent element to render the menu portal into. Default is the document body.

Item

Inherits props fromBase UI Menu Item

A selectable action in the menu.

Name Type Description
children
ReactNode
The label of the menu item.
variant
neutralcritical
The visual style of the item. Use "critical" for destructive actions.
Default: neutral
leadingIcon
ReactNode
An icon rendered before the item label.
description
string
Secondary text rendered beneath the item label.

Separator

Inherits props fromBase UI Menu Separator

Renders a dividing line between groups of items.

Group

Inherits props fromBase UI Menu Group

Groups related items together, optionally labelled by a GroupLabel.

Name Type Description
children
ReactNode
A group label and the items it labels.

GroupLabel

Inherits props fromBase UI Menu Group Label

Labels a group of items.

Name Type Description
children
ReactNode
The text that labels the group.

RadioGroup

Inherits props fromBase UI Menu Radio Group

Groups a set of RadioItems so that only one can be selected at a time.

RadioItem

Inherits props fromBase UI Menu Radio Item

A single selectable option within a RadioGroup. Closes the menu on selection.

Name Type Description
children
ReactNode
The label of the radio item.
value
any
The value of the radio item, compared against the radio group value.

SubMenuRoot

Inherits props fromBase UI Menu Submenu Root

Groups a nested submenu and manages its open state. Wraps a SubMenuTrigger and a Popup.

SubMenuTrigger

Inherits props fromBase UI Menu Submenu Trigger

An item that opens a nested submenu. Renders with a trailing caret.

Name Type Description
children
ReactNode
The label of the submenu trigger.
leadingIcon
ReactNode
An icon rendered before the trigger label.

Examples

Grouped