Menu API

Import

Cimpress UI exports five menu-related components:

MenuRoot: component that connects a trigger button with its associated menu
Menu: component that displays a collapsible list of options and actions that users can choose from.
MenuItem: component that renders a single interactive item within a menu.
MenuSection: component that groups related menu items together under a section title.
Divider: component that adds a horizontal line between menu items to visually separate them.

import { Divider, Menu, MenuItem, MenuRoot, MenuSection } from '@cimpress-ui/react';

Accessibility notes

Menu trigger button follows the ARIA menu button pattern. See the linked page for a list of available keyboard interactions.

Collapsible menu list follows the ARIA menu pattern. See the linked page for a list of available keyboard interactions.

Menu trigger button requires a textual label to remain accessible to assistive technologies. See our accessibility guide for more details.

To open a menu when a trigger button is pressed, wrap both the trigger button and the menu component with a MenuRoot component. This will automatically associate the button with the menu, without any manual setup.

Preview
Code

import { Button, Menu, MenuItem, MenuRoot } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <MenuRoot>
      <Button>Open menu</Button>
      <Menu aria-label="Menu">
        <MenuItem>A menu can be opened by an automatically attached trigger button.</MenuItem>
      </Menu>
    </MenuRoot>
  );
}

Collections

Menu is a collection component. See our collection components guide to learn how to work with collections.

API reference

MenuRoot

Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.

See menu usage guidelines.

MenuRootProps

children * ReactNode: The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child.
isOpen boolean: Whether the overlay is open by default (controlled).
defaultOpen boolean: Whether the overlay is open by default (uncontrolled).
onOpenChange (isOpen: boolean) => void: Handler that is called when the overlay's open state changes.

Displays a collapsible list of options and actions that users can choose from.

MenuProps<T extends CollectionItem = CollectionItem>

onAction (key: Key) => void: Handler that is called when an item is selected. When using onAction, all items must have an id prop defined.
children ReactNode | ((item: T) => ReactNode): The contents of the collection.
items Iterable<T, any, any>: The items to display in the collection.
onScroll (e: UIEvent<HTMLDivElement>) => void: Handler that is called when a user scrolls. See MDN.

MenuItem

Renders a single list item within Menu.

MenuItemProps

children * StringLikeChildren: The content to display as the label.
id Key: The ID of the item. Has to be unique across all sections and items.
description string: Additional description for the menu item.
icon ReactNode: An icon representing the menu item.
href string: A URL to link to.
routerOptions undefined: Options for the configured client side router.
hrefLang string: Hints at the human language of the linked URL. SeeMDN.
target HTMLAttributeAnchorTarget: The target window for the link. See MDN.
rel string: The relationship between the linked resource and the current page. See MDN.
download string | boolean: Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
ping string: A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy HTMLAttributeReferrerPolicy: How much of the referrer to send when following the link. See MDN.
onHoverStart (e: HoverEvent) => void: Handler that is called when a hover interaction starts.
onHoverEnd (e: HoverEvent) => void: Handler that is called when a hover interaction ends.
isDisabled boolean: Whether the item is disabled.
onAction () => void: Handler that is called when the item is selected.

MenuSection

Groups list items within Menu into a section.

MenuSectionProps<T extends CollectionItem = CollectionItem>

title * string: The content to display as the section title.
id Key: The ID of the section. Has to be unique across all sections and items.
children ReactNode | ((item: T) => ReactNode): The contents of the collection.
items Iterable<T, any, any>: The items to display in the collection.

Divider

Renders a divider between adjacent content.

ref Ref<HTMLDivElement>: The ref type for this component.

DividerProps

orientation 'vertical' | 'horizontal': The orientation of the divider (horizontal or vertical).

Defaults to 'horizontal' .
id string: The element's unique identifier. See MDN.
data-cim-style-root boolean: Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.
UNSAFE_className string: Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.
UNSAFE_style CSSProperties: Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

StyleProps

margin Responsive<Spacing | "auto">: The amount of margin applied to all edges of this component.
marginX Responsive<Spacing | "auto">: The amount of margin applied to the left and right edges of this component. Takes priority over margin.
marginY Responsive<Spacing | "auto">: The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.
marginTop Responsive<Spacing | "auto">: The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.
marginRight Responsive<Spacing | "auto">: The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.
marginBottom Responsive<Spacing | "auto">: The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.
marginLeft Responsive<Spacing | "auto">: The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.