Skip to main content

Dropdown

Dropdowns are used to reveal a list of options or commands.

The Dropdown component is a compound of the following:

  • DropdownButton: wraps the button that emits the trigger to open the DropdownMenu.
  • DropdownMenu: wraps a series of DropdownItems.
  • DropdownItem: wraps an item of the DropdownMenu.

Import

import { Dropdown, DropdownButton, DropdownMenu, DropdownItem } from '@faststore/ui'

Usage

Loading...

Use cases

Use the Dropdown component to create:

  • Navigation menus that present a list of links to subcategories related to a top-level category.
  • Mega menus that display navigation options in a two-dimensional dropdown layout.

Props

Customization

data-fs-dropdown-button

data-fs-dropdown-item

data-fs-dropdown-overlay

data-fs-dropdown-menu

Best practices

✅ Do's

  • Consider creating a mega menu if you have a website with too many top-ranking pages or categories.
  • Use clear typography, enough spacing, and a neat layout to create readable dropdowns.
  • Keep the dropdown items under two levels deep.

❌ Don'ts

  • Avoid dropdowns that are too long and force users to scroll down to see all the available options at a glance.
  • Don't use the Dropdown component for attribute selection and form fillings. Instead, use the Select component.

Accessibility

  • Check if the menu works in all browsers and is easily navigable for everyone.
  • The DropdownButton and DropdownItems must be finger-friendly for mobile users and large enough for reliable interactions. Generally, touch targets are at least 44 by 44 CSS pixels.
  • Text elements must have sufficient color contrast against the background.
  • Provide visual feedback on interactions. Whenever a user interacts with the DropdownButton or DropdownItem, the button should change its state and let the user know that something is happening as a consequence.
  • Make sure that the dropdown works on a tabbing map (i.e., when a user uses ‘tab’ to navigate an interface and ‘enter’ to input information).

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY