DropdownMenu

The dropdown menu item presents an option for users to select and is used inside a dropdown menu.

Usage

You can import the DropdownMenuItem component from the Design System like so:

import DropdownMenuItem from "../DropdownMenuItem";

Props

The dropdown menu item acts as a the wrapper for a single selectable item of your filter. There are four states this item should be able to be in. It can be (not) selected as well as (not) active. Active refers to the item that is focused by the user.

Example

In the following example the dropdown menu is used to display a list of filter options:

<div style={{ marginBottom: "100px" }}>
  <Downshift>
    {({
      getItemProps,
      getMenuProps,
      getRootProps,
      getToggleButtonProps,
      highlightedIndex,
      isOpen,
      selectedItem,
    }) => (
      <div {...getRootProps()}>
        <Filter.Button
          getToggleButtonProps={getToggleButtonProps}
          id="demo-filter"
          isOpen={isOpen}
          label="Choose your favourite movie"
        />
        <DropdownMenu getMenuProps={getMenuProps} label="Foo" isOpen>
          {isOpen &&
            ["A New Hope", "The Empire Strikes Back", "Return of the Jedi"].map(
              (movie, index) => (
                <DropdownMenuItem
                  key={index}
                  isSelected={movie === selectedItem}
                  {...getItemProps({
                    isActive: index === highlightedIndex,
                    key: movie,
                    index,
                    item: movie,
                  })}
                >
                  {movie}
                </DropdownMenuItem>
              ),
            )}
        </DropdownMenu>
      </div>
    )}
  </Downshift>
</div>