Menu Filters

Components

Menu - New!

Menu is an ecosystem of components that provide a structured and accessible way to create menus.

Filtering Menus

Seeds provides two specialized primitives for filtering menu items: MenuSearchInput and MenuSearchTokenInput.
These components are designed to be placed in the MenuHeader and work seamlessly with menu primitives to create powerful, accessible filter menus.

MenuSearchInput

MenuSearchInput extends the component, adapting its event listeners for compatibility with Downshift’s combobox pattern.
It is ideal for menus where users need to quickly find a single item from a long list.
MenuSearchInput provides a standard search input field that filters menu items as the user types, and also accepts a getIsItemVisible prop to override the default filtering logic.

Use case:

Single-select or action menus with many options.
Menus where users need to search and select one item.

Name	Type	Default	Description	Required?
`getIsItemVisible`	`( item: TypeInternalItemProps, inputValue: string ) => boolean`		A function that can be passed to override the default filtering logic

How to use:
Place MenuSearchInput inside a MenuHeader at the top of your menu.
The menu system will automatically filter items based on the input value.

Example:

import { MenuSearchInput } from '@sproutsocial/seeds-react-menu'

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
  <ActionMenu
    menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
  >
    <MenuHeader>
      <MenuSearchInput
        id="action-search"
        name="search"
        type="search"
        aria-label="Search Menu"
      />
    </MenuHeader>
    <MenuContent>
      <MenuGroup id="actions">
        <MenuItem
          onClick={() => alert("compose")}
          id="Compose"
        >
          Compose
        </MenuItem>
        <MenuItem
          onClick={() => alert("messages")}
          id="View Messages"
        >
          View Messages
        </MenuItem>
        <MenuItem
          onClick={() => alert("analyze")}
          id="Analyze post"
        >
          Analyze post
        </MenuItem>
      </MenuGroup>
    </MenuContent>
  </ActionMenu>
</Box>

View MenuSearchInput in Storybook

MenuSearchTokenInput

MenuSearchTokenInput extends the component, adapting its event listeners for compatibility with Downshift’s combobox pattern.
It accepts all the same props as AutocompleteTokenInput, and also accepts a getIsItemVisible prop to override the default filtering logic.
MenuSearchTokenInput is designed for multi-select menus where users can search for and select multiple items, which are then displayed as tokens within the input.

Use case:

Multi-select menus with search and tokenized selection.
Scenarios where users need to filter, select, and view multiple chosen items at once.

See AutocompleteTokenInput for a full list of props.

Name	Type	Description
`getTokenProps`	`(itemId: string) => Partial<TypeTokenSpec>`	A function that can be passed to override the default token props
`MenuContext`	`\| MenuToggleContext` `\| MenuContentContext`	Specify the menu context to use. MenuToggleContext is the default. This prop is only needed for specialized use cases.
`getIsItemVisible`	`( item: TypeInternalItemProps, inputValue: string ) => boolean`	A function that can be passed to override the default filtering logic

How to use:
Place MenuSearchTokenInput inside a MenuHeader at the top of your MultiSelectMenu. Selected items will appear as tokens in the input, and the menu will filter available options as the user types.

Example:

import { MenuSearchTokenInput } from '@sproutsocial/seeds-react-menu'

<Box display="flex" justifyContent="center" alignItems="center" height="100%">
  <MultiSelectMenu
    menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
  >
    <MenuHeader title="Select Accounts">
      <MenuSearchTokenInput
        id="selections"
        aria-label="Select items"
      />
    </MenuHeader>
    <MenuContent>
      <MenuGroup id="actions">
        <MenuItem itemType="checkbox" id="account1">
          Account 1
        </MenuItem>
        <MenuItem itemType="checkbox" id="account2">
          Account 2
        </MenuItem>
        <MenuItem itemType="checkbox" id="account3">
          Account 3
        </MenuItem>
      </MenuGroup>
    </MenuContent>
  </MultiSelectMenu>
</Box>

View MenuSearchTokenInput in Storybook