Context selector

A context selector is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources.

As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new dropdown component that is built off of menu.

Props

MenuToggle

*required
Name	Type	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

MenuFooter

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the footer
className	string	''	Additional classes added to the footer

MenuSearch

*required
Name	Type	Default	Description
children	React.ReactNode		Items within search

MenuSearchInput

*required
Name	Type	Default	Description
children	React.ReactNode		Items within input

Divider

*required
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.

InputGroup

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content rendered inside the input group.
className	string		Additional classes added to the input group.

SearchInput

*required
Name	Type	Default	Description
advancedSearchDelimiter	string		Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.
attributes	string[] \| SearchInputSearchAttribute[]	[]	Array of attribute values used for dynamically generated advanced search.
className	string		Additional classes added to the advanced search menu.
formAdditionalItems	React.ReactNode
getAttrValueMap	() => { [key: string]: string }		Function which builds an attribute-value map by parsing the value in the search input.
hasWordsAttrLabel	React.ReactNode	'Has words'	Attribute label for strings unassociated with one of the provided listed attributes.
isSearchMenuOpen	boolean		Flag for toggling the open/close state of the advanced search menu.
onChange	(event: React.FormEvent<HTMLInputElement>, value: string) => void		A callback for when the input value changes.
onClear	(event: React.SyntheticEvent<HTMLButtonElement>) => void		A callback for when the user clicks the clear button.
onSearch	( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void		A callback for when the search button is clicked.
onToggleAdvancedMenu	(e: React.SyntheticEvent<HTMLButtonElement>) => void		A callback for when the open advanced search button is clicked.
parentInputRef	React.RefObject<any>		Ref of the input element within the search input.
parentRef	React.RefObject<any>		Ref of the div wrapping the whole search input.
resetButtonLabel	string	'Reset'	Label for the button which resets the advanced search form and clears the search input.
submitSearchButtonLabel	string	'Search'	Label for the button which calls the onSearch event handler.
value	string	''	Value of the search input.

See the Menu documentation for additional props that may be passed.
*required
Name	Type	Description
togglerequired	DropdownToggleProps \| ((toggleRef: React.RefObject<any>) => React.ReactNode)	Dropdown 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 dropdown.
className	string	Classes applied to root element of dropdown.
focusTimeoutDelay	number	Time in ms to wait before firing the toggles' focus event. Defaults to 0
isOpen	boolean	Flag to indicate if menu is opened.
isPlain	boolean	Indicates if the menu should be without the outer box-shadow.
isScrollable	boolean	Indicates if the menu should be scrollable.
maxMenuHeight	string	Maximum height of dropdown menu
menuHeight	string	Height of the dropdown menu
onOpenChange	(isOpen: boolean) => void	Callback to allow the dropdown 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 called when user selects item.
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.
popperProps	DropdownPopperProps	Additional properties to pass to the Popper
shouldFocusFirstItemOnOpen Beta	boolean	Flag indicating the first menu item should be focused after opening the dropdown.
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.
zIndex	number	z-index of the dropdown menu

DropdownGroup

See the MenuGroup section of the Menu documentation for additional props that may be passed.
*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything which can be rendered in a dropdown group.
className	string		Classes applied to root element of dropdown group
label	string		Label of the dropdown group
labelHeadingLevel	No type info	'h1'

DropdownList

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Anything which can be rendered in a dropdown list
className	string		Classes applied to root element of dropdown list

DropdownItem

See the MenuItem section of the Menu documentation for additional props that may be passed.
*required
Name	Type	Description
children	React.ReactNode	Anything which can be rendered in a dropdown item
className	string	Classes applied to root element of dropdown item
description	React.ReactNode	Description of the dropdown item
isAriaDisabled	boolean	Render item as aria-disabled option
isDisabled	boolean	Render item as disabled option
onClick	(event?: any) => void	Callback for item click
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.
tooltipProps	TooltipProps	Props for adding a tooltip to a menu item
value	any	Identifies the component in the dropdown onSelect callback

Edit this page on GitHub