Skip to content
CFA Design System

Menu

ReactProps
Github icon-storybook-square Storybook Markdown Copy for LLM

A menu is a small overlay that uses the popover component to display actionable menu items. The indexing order appears over all other elements on a page and can be triggered by a button or an icon button.

Import

import { Menu } from "@cfa/react-core";

Live Editor

Guidelines

When to use

  • Menu is for grouping related actions under a single trigger when space is tight, revealed on demand in a popover.

Do

  • Trigger with Button or IconButton. Keep the menu close to the trigger.
  • Apply leading icons consistently, on every item or on none.
  • For an overflow menu, hide secondary actions behind a ⋯ IconButton with aria-label="More actions". Separate related groups with dividers.
  • For an account menu, use an Avatar or username trigger. Show current account info at the top. Place sign out at the bottom, separated.
  • For a context menu on table rows or list items, anchor to the click or long-press position.
  • Allow the menu to scroll when the item list would otherwise overflow the viewport.

Avoid

  • Using Menu for primary app navigation. Use SideNavigation or Tabs.
  • Using Menu as a Tooltip. Use Tooltip.
  • Using Menu to pick one value in a form. Use Select.

Examples

Icon Button Trigger

You may use any button or clickable element as a trigger, but the IconButton is the most common use case.

Avatar Trigger

You can use the Avatar component as a trigger for the menu. This is useful for user profile menus.

Pressable Trigger

Alternatively to an IconButton or Avatar, you can use the Pressable component to create a trigger that can be styled to your needs.

Should Focus Wrap

The focus of the menu items will wrap back to the beginning by default, or when shouldFocusWrap is true. Set shouldFocusWrap on the <Menu.Container /> to false to disable the circular keyboard navigation.

You can add events to Menu.Item components to handle user interactions like onAction, onHoverStart, onHoverEnd, and onHoverChange.

You can use the href prop on Menu.Item to create links.

You can disable a Menu.Item by setting the isDisabled prop to true.

Divider

You can use the Menu.Divider component to visually separate menu items.

Section Header

The Menu.Section component allows you to group menu items under a header. Use the Menu.Header component to define the section title.