Skip to content
CFA Design System

Menu

Guidelines React

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

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.

Props

Visit the Documentation Site for the full list of props.

NameTypeDefaultDescription
defaultOpenboolean-Whether the overlay is open by default (uncontrolled).
isOpenboolean-Whether the overlay is open by default (controlled).
onOpenChange(isOpen: boolean) => void-Handler that is called when the overlay's open state changes.