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

React

Loading...

CSS

[data-fs-dropdown-button] {
  @apply bg-pink-500 text-white text-base w-36 rounded-md p-1;
  @apply focus:bg-pink-700;
}

[data-fs-dropdown-item] {
  @apply bg-gray-300 p-2 text-base border-2;
  @apply focus:bg-pink-700 focus:text-white focus:border-pink-300  focus:outline-none;
}

[data-fs-dropdown-overlay] {
  @apply bg-transparent;
}

[data-fs-dropdown-menu] {
  @apply flex flex-col m-0;
  @apply border border-gray-700;
  padding: 0;
}

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

DropdownButton

DropdownItem

DropdownMenu

Dropdown

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).