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
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 any
onSearchButtonClick() => undefined as any

ContextSelectorItem Props

The ContextSelectorItem component accepts the following props.

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