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.
Props
MenuToggle
| Name | Type | Default | Description |
|---|---|---|---|
| badge | BadgeProps | React.ReactNode | Optional badge rendered inside the toggle, after the children content | |
| children | React.ReactNode | Content rendered inside the toggle | |
| className | string | Additional classes added to the toggle | |
| icon | React.ReactNode | Optional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component. | |
| isCircle Beta | boolean | Flag indicating the toggle has circular styling. Can only be applied to plain toggles. | |
| isDisabled | boolean | Flag indicating the toggle is disabled | |
| isExpanded | boolean | Flag indicating the toggle has expanded styling | |
| isFullHeight | boolean | Flag indicating the toggle is full height | |
| isFullWidth | boolean | Flag indicating the toggle takes up the full width of its parent | |
| isPlaceholder | boolean | Flag indicating the toggle contains placeholder text | |
| isSettings | boolean | Flag indicating whether the toggle is a settings toggle. This will override the icon property | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| size | 'default' | 'sm' | Adds styling which affects the size of the menu toggle | |
| splitButtonItems | React.ReactNode[] | Elements to display before the toggle button. When included, renders the menu toggle as a split button. | |
| status | 'success' | 'warning' | 'danger' | Status styles of the menu toggle | |
| statusIcon | React.ReactNode | Overrides the status icon | |
| variant | 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead' | Variant styles of the menu toggle |
Divider
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the divider | |
| component | 'hr' | 'li' | 'div' | DividerVariant.hr | The 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. | |
| role | 'separator' | 'presentation' | 'separator' | The ARIA role of the divider when the component property has a value other than "hr". |
Select
| Name | Type | Default | Description |
|---|---|---|---|
| togglerequired | SelectToggleProps | ((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. | |
| activeItemId | string | number | itemId of the currently active item. You can also specify isActive on the MenuItem. | |
| activeMenu | string | ID of the currently active menu for the drilldown variant | |
| children | React.ReactNode | Anything that can be rendered inside of the Menu | |
| className | string | Additional classes added to the Menu | |
| containsDrilldown | boolean | Indicates if menu contains a drilldown menu | |
| containsFlyout | boolean | Indicates if menu contains a flyout menu | |
| drilldownItemPath | string[] | Indicates the path of drilled in menu itemIds | |
| drilledInMenus | string[] | Array of menus that are drilled in | |
| focusTimeoutDelay | number | Time in ms to wait before firing the toggles' focus event. Defaults to 0 | |
| id | string | ID of the menu | |
| isMenuDrilledIn | boolean | Indicates if a menu is drilled into | |
| isNavFlyout | boolean | Indicating that the menu should have nav flyout styling | |
| isOpen | boolean | Flag to indicate if select is open | |
| isPlain | boolean | Indicates if the menu should be without the outer box-shadow | |
| isRootMenu | boolean | Internal flag indicating if the Menu is the root of a menu tree | |
| isScrollable | boolean | Indicates if the menu should be srollable | |
| maxMenuHeight | string | Maximum height of select menu | |
| menuHeight | string | Height of the select menu | |
| onActionClick | (event?: any, itemId?: any, actionId?: any) => void | Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. | |
| onDrillIn | ( event: React.KeyboardEvent | React.MouseEvent, fromItemId: string, toItemId: string, itemId: string ) => void | Callback for drilling into a submenu | |
| onDrillOut | (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void | Callback for drilling out of a submenu | |
| onGetMenuHeight | (menuId: string, height: number) => void | Callback for collecting menu heights | |
| onOpenChange | (isOpen: boolean) => void | Callback 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 specified in onOpenChangeKeys. | |
| onOpenChangeKeys | string[] | 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?: SelectOptionProps['value']) => void | Callback for updating when item selection changes. You can also specify onClick on the MenuItem. | |
| onToggleKeydown | (event: KeyboardEvent) => void | Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| parentMenu | string | ID of parent menu for drilldown menus | |
| popperProps | PopperOptions | Additional properties to pass to the popper | |
| role | string | Determines the accessible role of the menu. For a non-checkbox menu that can have one or more items selected, pass in "listbox". | |
| selected | any | any[] | Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem. | |
| shouldFocusFirstItemOnOpen Beta | boolean | Flag indicating the first menu item should be focused after opening the menu. | |
| shouldFocusToggleOnSelect | boolean | Flag 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. | |
| shouldPreventScrollOnItemFocus | boolean | Flag indicating if scroll on focus of the first menu item should occur. | |
| variant | 'default' | 'typeahead' | Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows. | |
| zIndex | number | z-index of the select menu |
SelectList
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything that can be rendered inside of menu list | |
| aria-label | string | Adds an accessible name to the menu. | |
| className | string | Additional classes added to the menu list | |
| isAriaMultiselectable | boolean | false | Indicates to assistive technologies whether more than one item can be selected for a non-checkbox menu. Only applies when the menu's role is "listbox". |
SelectOption
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Anything which can be rendered in a select option | |
| className | string | Classes applied to root element of select option | |
| description | React.ReactNode | Description of the option | |
| hasCheckbox | boolean | Indicates the option has a checkbox | |
| icon | React.ReactNode | Render option with icon | |
| isDisabled | boolean | Indicates the option is disabled | |
| isExternalLink | boolean | Render an external link icon on focus or hover, and set the link's "target" attribute to a value of "_blank". | |
| isFocused | boolean | Indicates the option is focused | |
| isSelected | boolean | Indicates the option is selected | |
| value | any | Identifies the component in the Select onSelect callback |
SelectGroup
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a select group | |
| className | string | Classes applied to root element of select group | |
| label | React.ReactNode | Label of the select group |
