Options menu

An options menu is similar to a dropdown, but provides a way to select among a set of optional settings rather than trigger an action.

As the <OptionsMenu> component is now deprecated, an options menu may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new select component that is built off of menu.

Options menu

Props

*required
NameTypeDefaultDescription
badgeBadgeProps | React.ReactNodeOptional badge rendered inside the toggle, after the children content
childrenReact.ReactNodeContent rendered inside the toggle
classNamestringAdditional classes added to the toggle
iconReact.ReactNodeOptional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.
isDisabledbooleanFlag indicating the toggle is disabled
isExpandedbooleanFlag indicating the toggle has expanded styling
isFullHeightbooleanFlag indicating the toggle is full height
isFullWidthbooleanFlag indicating the toggle takes up the full width of its parent
splitButtonOptionsSplitButtonOptionsObject used to configure a split button menu toggle
statusBeta'success' | 'warning' | 'danger'Status styles of the menu toggle
statusIconReact.ReactNodeOverrides the status icon
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'Variant styles of the menu toggle

Divider

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the divider
component'hr' | 'li' | 'div'DividerVariant.hrThe component type to use
inset{ default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }Insets at various breakpoints.
orientation{ default?: 'vertical' | 'horizontal'; sm?: 'vertical' | 'horizontal'; md?: 'vertical' | 'horizontal'; lg?: 'vertical' | 'horizontal'; xl?: 'vertical' | 'horizontal'; '2xl'?: 'vertical' | 'horizontal'; }Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout.

Select

See the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
togglerequiredSelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)Select toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.
childrenReact.ReactNodeAnything which can be rendered in a select
classNamestringClasses applied to root element of select
isOpenbooleanFlag to indicate if select is open
isPlainbooleanIndicates if the select should be without the outer box-shadow
isScrollablebooleanIndicates if the select menu should be scrollable
maxMenuHeightstringMaximum height of select menu
menuHeightstringHeight of the select menu
onOpenChange(isOpen: boolean) => voidCallback to allow the select component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys.
onOpenChangeKeysBetastring[]Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.
onSelect(event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidFunction callback when user selects an option.
popperPropsSelectPopperPropsAdditional properties to pass to the popper
roleBetastringDetermines the accessible role of the select. For a checkbox select pass in "menu".
selectedany | any[]Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption.
shouldFocusFirstItemOnOpenBetabooleanFlag indicating the first menu item should be focused after opening the menu.
shouldFocusToggleOnSelectbooleanFlag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus.
zIndexnumberz-index of the select menu

SelectList

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a select list
classNamestringClasses applied to root element of select list
isAriaMultiselectableBetabooleanfalseIndicates to assistive technologies whether more than one item can be selected for a non-checkbox select.

SelectOption

See the MenuItem section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a select option
classNamestringClasses applied to root element of select option
descriptionReact.ReactNodeDescription of the option
hasCheckboxbooleanIndicates the option has a checkbox
iconReact.ReactNodeRender option with icon
isDisabledbooleanIndicates the option is disabled
isExternalLinkbooleanRender an external link icon on focus or hover, and set the link's "target" attribute to a value of "_blank".
isFocusedbooleanIndicates the option is focused
isSelectedbooleanIndicates the option is selected
valueanyIdentifies the component in the Select onSelect callback

SelectGroup

See the MenuGroup section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a select group
classNamestringClasses applied to root element of select group
labelstringLabel of the select group

View source on GitHub