DropdownMenu

The dropdown menu progressively discloses information to the user on demand. It may be used to allow users to select one or more of the presented options or to display purely informational content like a description or a hint.

This pattern contains only the menu and does not assume anything about what will be displayed inside it. However, this component is best used in conjunction with dropdown menu items to display a list of options.

Usage

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

import DropdownMenu from "../DropdownMenu";

Props

As mentioned above the dropdown menu only acts as wrapper. Per default it renders an ul-tag, but you can override this with a prop named tag:

type GetMenuPropsFunction = (
  options?: GetMenuPropsOptions | undefined,
  otherOptions?: GetPropsCommonOptions | undefined,
) => any;

Example

In the following example the dropdown menu item is used inside a dropdown menu 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>