Skip to Content
Patternfly Logo

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.ReactNodeNonullcontent rendered inside the Context Selector
classNamestringNo''Classes applied to root element of Context Selector
isOpenbooleanNofalseFlag to indicate if Context Selector is opened
onToggle(event: any, value: boolean) => voidNo() => undefined as anyFunction callback called when user clicks toggle button
onSelect(event: any, value: React.ReactNode) => voidNo() => undefined as anyFunction callback called when user selects item
screenReaderLabelstringNo''Labels the Context Selector for Screen Readers
toggleTextstringNo''Text that appears in the Context Selector Toggle
searchButtonAriaLabelstringNo'Search menu items'aria-label for the Context Selector Search Button
searchInputValuestringNo''Value in the Search field
onSearchInputChange(value: string) => voidNo() => undefined as anyFunction callback called when user changes the Search Input
searchInputPlaceholderstringNo'Search'Search Input placeholder
onSearchButtonClick(event?: React.SyntheticEvent<HTMLButtonElement>) => voidNo() => undefined as anyFunction callback for when Search Button is clicked
ContextSelectorItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything which can be rendered as Context Selector item
classNamestringNo''Classes applied to root element of the Context Selector item
isDisabledbooleanNofalseRender Context Selector item as disabled
isHoveredbooleanNofalseForces display of the hover state of the element
onClick(event: React.MouseEvent) => voidNo(): any => undefinedCallback for click event
indexnumberNoundefinedinternal index of the item
sendRef(index: number, current: any) => voidNo() => {}Internal callback for ref tracking