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. | |
| 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 | |
| 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. |
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. | |
| children | React.ReactNode | Anything which can be rendered in a select | |
| className | string | Classes applied to root element of select | |
| focusTimeoutDelay | number | Time in ms to wait before firing the toggles' focus event. Defaults to 0 | |
| isOpen | boolean | Flag to indicate if select is open | |
| isPlain | boolean | Indicates if the select should be without the outer box-shadow | |
| isScrollable | boolean | Indicates if the select menu should be scrollable | |
| maxMenuHeight | string | Maximum height of select menu | |
| menuHeight | string | Height of the select menu | |
| 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 specificed 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?: string | number) => void | Function callback when user selects an option. | |
| 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. | |
| popperProps | SelectPopperProps | Additional properties to pass to the popper | |
| role | string | Determines the accessible role of the select. For a checkbox select pass in "menu". | |
| selected | any | 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. | |
| 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 which can be rendered in a select list | |
| className | string | Classes applied to root element of select list | |
| isAriaMultiselectable | boolean | false | Indicates to assistive technologies whether more than one item can be selected for a non-checkbox select |
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 | string | Label of the select group |