PatternFly

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.

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

Examples

Basic

Plain with text

Props

ContextSelector

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Context Selector
classNamestring''Classes applied to root element of Context Selector
disableFocusTrapbooleanfalseFlag to disable focus trap
footerReact.ReactNodenullFooter of the context selector
idstringId of the context selector
isFlipEnabledbooleantrueFlag for indicating that the context selector menu should automatically flip vertically when it reaches the boundary. This prop can only be used when the context selector component is not appended inline, e.g. `menuAppendTo="parent"`
isFullHeightbooleanFlag indicating that the context selector should expand to full height
isOpenbooleanfalseFlag to indicate if Context Selector is opened
isPlainbooleanfalseFlag to indicate the toggle has no border or background
isTextbooleanfalseFlag to indicate if toggle is textual toggle
menuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''inline'The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
menuAriaLabelstringAdds an accessible label to the context selector menu.
onSearchButtonClick(event?: React.SyntheticEvent<HTMLButtonElement>) => void() => undefined as anyFunction callback for when Search Button is clicked
onSearchInputChange(event: React.FormEvent<HTMLInputElement>, value: string) => void() => undefined as anyFunction callback called when user changes the Search Input
onSelect(event: any, value: React.ReactNode) => void() => undefined as anyFunction callback called when user selects item
onToggle(event: any, value: boolean) => void() => undefined as anyFunction callback called when user clicks toggle button
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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.
screenReaderLabelstring''Labels the Context Selector for Screen Readers
searchButtonAriaLabelstring'Search menu items'Aria-label for the Context Selector Search Button
searchInputPlaceholderstring'Search'Search Input placeholder
searchInputValuestring''Value in the Search field
toggleTextReact.ReactNode''Component or string that will be used in the context selector. This prop is placed in a button, and cannot contain any interactive elements
zIndexnumber9999z-index of the context selector when menuAppendTo is not inline.

ContextSelectorItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything which can be rendered as Context Selector item
classNamestring''Classes applied to root element of the Context Selector item
hrefstringnullLink href, indicates item should render as anchor tag
isDisabledbooleanfalseRender Context Selector item as disabled
onClick(event: React.MouseEvent) => void(): any => undefinedCallback for click event
sendRef(index: number, current: any) => void() => {}Internal callback for ref tracking

ContextSelectorFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the ContextSelectorFooter
classNamestring''Additional classes added to the ContextSelectorFooter

View source on GitHub