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
Examples Props Selected Project: My Project ContextSelector properties Name Type Required Default Description children React.ReactNode No null content rendered inside the Context Selector className string No '' Classes applied to root element of Context Selector isOpen boolean No false Flag to indicate if Context Selector is opened onToggle (event: any, value: boolean) => void No () => undefined as any Function callback called when user clicks toggle button onSelect (event: any, value: React.ReactNode) => void No () => undefined as any Function callback called when user selects item screenReaderLabel string No '' Labels the Context Selector for Screen Readers toggleText string No '' Text that appears in the Context Selector Toggle searchButtonAriaLabel string No 'Search menu items' Aria-label for the Context Selector Search Button searchInputValue string No '' Value in the Search field onSearchInputChange (value: string) => void No () => undefined as any Function callback called when user changes the Search Input searchInputPlaceholder string No 'Search' Search Input placeholder onSearchButtonClick (event?: React.SyntheticEvent<HTMLButtonElement>) => void No () => undefined as any Function callback for when Search Button is clicked
ContextSelectorItem properties Name Type Required Default Description children React.ReactNode No null Anything which can be rendered as Context Selector item className string No '' Classes applied to root element of the Context Selector item isDisabled boolean No false Render Context Selector item as disabled onClick (event: React.MouseEvent) => void No (): any => undefined Callback for click event index number No undefined internal index of the item sendRef (index: number, current: any) => void No () => {} Internal callback for ref tracking
