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.

As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new dropdown component that is built off of menu.

Context selector menu

Props

*required
NameTypeDefaultDescription
badgeBadgeProps | React.ReactNodeOptional badge rendered inside the toggle, after the children content
childrenReact.ReactNodeContent rendered inside the toggle
classNamestringAdditional classes added to the toggle
iconReact.ReactNodeOptional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component.
isDisabledbooleanFlag indicating the toggle is disabled
isExpandedbooleanFlag indicating the toggle has expanded styling
isFullHeightbooleanFlag indicating the toggle is full height
isFullWidthbooleanFlag indicating the toggle takes up the full width of its parent
splitButtonOptionsSplitButtonOptionsObject used to configure a split button menu toggle
variant'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'Variant styles of the menu toggle
*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the footer
classNamestring''Additional classes added to the footer
*required
NameTypeDefaultDescription
childrenReact.ReactNodeItems within search
*required
NameTypeDefaultDescription
childrenReact.ReactNodeItems within input

Divider

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the divider
component'hr' | 'li' | 'div'DividerVariant.hrThe component type to use
inset{ default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }Insets at various breakpoints.
orientation{ default?: 'vertical' | 'horizontal'; sm?: 'vertical' | 'horizontal'; md?: 'vertical' | 'horizontal'; lg?: 'vertical' | 'horizontal'; xl?: 'vertical' | 'horizontal'; '2xl'?: 'vertical' | 'horizontal'; }Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout.

InputGroup

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the input group.
classNamestringAdditional classes added to the input group.

SearchInput

The main search input component.
*required
NameTypeDefaultDescription
advancedSearchDelimiterstringDelimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props.
appendToHTMLElement | (() => HTMLElement) | 'inline'The container to append the menu to. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: appendTo={() => document.body} appendTo={document.getElementById('target')}
aria-labelstringAn accessible label for the search input.
attributesstring[] | SearchInputSearchAttribute[]Array of attribute values used for dynamically generated advanced search.
classNamestringAdditional classes added to the search input.
expandableInputSearchInputExpandableObject that makes the search input expandable/collapsible.
formAdditionalItemsReact.ReactNode
hasWordsAttrLabelReact.ReactNodeAttribute label for strings unassociated with one of the provided listed attributes.
hintstringA suggestion for autocompleting.
isAdvancedSearchOpenbooleanA flag for controlling the open state of a custom advanced search implementation.
isDisabledbooleanFlag indicating if search input is disabled.
isNextNavigationButtonDisabledbooleanFlag indicating if the next navigation button is disabled.
isPreviousNavigationButtonDisabledbooleanFlag indicating if the previous navigation button is disabled.
namestringName attribue for the search input
nextNavigationButtonAriaLabelstringAccessible label for the button to navigate to next result.
onChange(event: React.FormEvent<HTMLInputElement>, value: string) => voidA callback for when the input value changes.
onClear(event: React.SyntheticEvent<HTMLButtonElement>) => voidA callback for when the user clicks the clear button.
onNextClick(event: React.SyntheticEvent<HTMLButtonElement>) => voidA callback for when the user clicks to navigate to next result.
onPreviousClick(event: React.SyntheticEvent<HTMLButtonElement>) => voidA callback for when the user clicks to navigate to previous result.
onSearch( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => voidA callback for when the search button is clicked.
onToggleAdvancedSearch(event: React.SyntheticEvent<HTMLButtonElement>, isOpen?: boolean) => voidA callback for when the open advanced search button is clicked.
openMenuButtonAriaLabelstringAccessible label for the button which opens the advanced search form menu.
placeholderstringPlaceholder text of the search input.
previousNavigationButtonAriaLabelstringAccessible label for the button to navigate to previous result.
resetButtonLabelstringLabel for the button which resets the advanced search form and clears the search input.
resultsCountnumber | stringThe number of search results returned. Either a total number of results, or a string representing the current result over the total number of results. i.e. "1 / 5".
submitSearchButtonLabelstringLabel for the button which calls the onSearch event handler.
valuestringValue of the search input.
zIndexnumberz-index of the advanced search form when appendTo is not inline.
See the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
togglerequiredDropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property.
childrenReact.ReactNodeAnything which can be rendered in a dropdown.
classNamestringClasses applied to root element of dropdown.
isOpenbooleanFlag to indicate if menu is opened.
isPlainbooleanIndicates if the menu should be without the outer box-shadow.
isScrollablebooleanIndicates if the menu should be scrollable.
onOpenChange(isOpen: boolean) => voidCallback to allow the dropdown component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys.
onOpenChangeKeysBetastring[]Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.
onSelect(event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidFunction callback called when user selects item.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
popperPropsDropdownPopperPropsAdditional properties to pass to the Popper
shouldFocusToggleOnSelectbooleanFlag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus.
zIndexnumberz-index of the dropdown menu
See the MenuGroup section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a dropdown group.
classNamestringClasses applied to root element of dropdown group
labelstringLabel of the dropdown group
labelHeadingLevelNo type info'h1'
*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeAnything which can be rendered in a dropdown list
classNamestringClasses applied to root element of dropdown list
See the MenuItem section of the Menu documentation for additional props that may be passed.
*required
NameTypeDefaultDescription
childrenReact.ReactNodeAnything which can be rendered in a dropdown item
classNamestringClasses applied to root element of dropdown item
descriptionReact.ReactNodeDescription of the dropdown item
isAriaDisabledbooleanRender item as aria-disabled option
isDisabledbooleanRender item as disabled option
onClick(event?: any) => voidCallback for item click
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
tooltipPropsTooltipPropsProps for adding a tooltip to a menu item
valueanyIdentifies the component in the dropdown onSelect callback

View source on GitHub