Context selector

Deprecated

Demo

A context selector can be used in addition to global navigation when the data or resources you show in the interface need to change depending on the user's context.

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
splitButtonOptions	SplitButtonOptions	Object used to configure a split button menu toggle
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

The main search input component.
*required
Name	Type	Description
advancedSearchDelimiter	string	Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.
appendTo	HTMLElement \| (() => HTMLElement) \| 'inline'	The container to append the menu to. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo={() => document.body} appendTo={document.getElementById('target')}
aria-label	string	An accessible label for the search input.
attributes	string[] \| SearchInputSearchAttribute[]	Array of attribute values used for dynamically generated advanced search.
className	string	Additional classes added to the search input.
expandableInput	SearchInputExpandable	Object that makes the search input expandable/collapsible.
formAdditionalItems	React.ReactNode
hasWordsAttrLabel	React.ReactNode	Attribute label for strings unassociated with one of the provided listed attributes.
hint	string	A suggestion for autocompleting.
isAdvancedSearchOpen	boolean	A flag for controlling the open state of a custom advanced search implementation.
isDisabled	boolean	Flag indicating if search input is disabled.
isNextNavigationButtonDisabled	boolean	Flag indicating if the next navigation button is disabled.
isPreviousNavigationButtonDisabled	boolean	Flag indicating if the previous navigation button is disabled.
name	string	Name attribue for the search input
nextNavigationButtonAriaLabel	string	Accessible label for the button to navigate to next result.
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.
onNextClick	(event: React.SyntheticEvent<HTMLButtonElement>) => void	A callback for when the user clicks to navigate to next result.
onPreviousClick	(event: React.SyntheticEvent<HTMLButtonElement>) => void	A callback for when the user clicks to navigate to previous result.
onSearch	( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void	A callback for when the search button is clicked.
onToggleAdvancedSearch	(event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => void	A callback for when the open advanced search button is clicked.
openMenuButtonAriaLabel	string	Accessible label for the button which opens the advanced search form menu.
placeholder	string	Placeholder text of the search input.
previousNavigationButtonAriaLabel	string	Accessible label for the button to navigate to previous result.
resetButtonLabel	string	Label for the button which resets the advanced search form and clears the search input.
resultsCount	number \| string	The number of search results returned. Either a total number of results, or a string representing the current result over the total number of results. i.e. "1 / 5".
submitSearchButtonLabel	string	Label for the button which calls the onSearch event handler.
value	string	Value of the search input.
zIndex	number	z-index of the advanced search form when appendTo is not inline.

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.
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.
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.
onOpenChangeKeysBeta	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.
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
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.
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

View source on GitHub

Privacy statement Terms of use All policies and guidelines