React

Context selector

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 users’ context. Related design guidelines: Navigation system

ExamplesProps

Examples

Simple context selector

Copied to clipboard

Props

ContextSelector Props

The ContextSelector component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullcontent rendered inside the Context Selector
classNamestring''Classes applied to root element of Context Selector
isOpenboolfalseFlag to indicate if Context Selector is opened
onTogglefunc() => {}Function callback called when user clicks toggle button
onSelectfunc() => {}Function callback called when user selects item
screenReaderLabelstring''Labels the Context Selector for Screen Readers
toggleTextstring''Text that appears in the Context Selector Toggle
searchButtonAriaLabelstring'Search menu items'aria-label for the Context Selector Search Button
searchInputValuestring''Value in the Search field
onSearchInputChangefunc() => {}Function callback called when user changes the Search Input
searchInputPlaceholderstring'Search'Search Input placeholder
onSearchButtonClickfunc() => {}Function callback for when Search Button is clicked

ContextSelectorItem Props

The ContextSelectorItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything which can be rendered as Context Selector item
classNamestring''Classes applied to root element of the Context Selector item
isDisabledboolfalseRender Context Selector item as disabled
isHoveredboolfalseForces display of the hover state of the element
onClickfunc() => {}Callback for click event
anyAdditional props are spread to the button element