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

Basic

Props

ContextSelector properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull as React.ReactNodecontent rendered inside the Context Selector
classNamestring''Classes applied to root element of Context Selector
isOpenbooleanfalseFlag to indicate if Context Selector is opened
onToggle(value: boolean) => void() => undefined as anyFunction callback called when user clicks toggle button
onSelect(event: any, value: React.ReactNode) => void() => undefined as anyFunction 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
searchInputPlaceholderstring'Search'Search Input placeholder
onSearchInputChange() => undefined as anynull
onSearchButtonClick() => undefined as anynull
ContextSelectorItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull as React.ReactNodeAnything which can be rendered as Context Selector item
classNamestring''Classes applied to root element of the Context Selector item
isDisabledbooleanfalseRender Context Selector item as disabled
isHoveredbooleanfalseForces display of the hover state of the element
onClick(event: React.MouseEvent) => void(): any => undefinedCallback for click event
indexnumberundefined as numberinternal index of the item
sendRef(index: number, current: any) => voidFunction.prototypeInternal callback for ref tracking