Dropdown

Displays a set of actions/items to the user, usually used to show a menu of options.

Overview

Import the component from @faststore/ui

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

Import Styles

import '@faststore/ui/src/components/molecules/Dropdown/styles.scss'

Name	Type	Description	Default
Coming Soon

Name	Type	Description	Default
Coming Soon

Name	Type	Description	Default
Coming Soon

Name	Type	Description	Default
Coming Soon

Local token	Default value/Global token linked
`--fs-dropdown-item-min-height`	`2.375rem`
`--fs-dropdown-item-padding`	`var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1)`

`--fs-dropdown-item-text-size`	`var(--fs-text-size-base)`
`--fs-dropdown-item-text-weight`	`var(--fs-text-weight-regular)`

`--fs-dropdown-item-color`	`var(--fs-color-link)`
`--fs-dropdown-item-bkg-color`	`var(--fs-color-tertiary-bkg-light)`
`--fs-dropdown-item-bkg-color-hover`	`var(--fs-color-primary-bkg-light)`

`--fs-dropdown-item-border-bottom-color`	`var(--fs-border-color-light)`

`--fs-dropdown-item-icon-min-width`	`1.125rem`
`--fs-dropdown-item-icon-margin-right`	`var(--fs-spacing-0)`
`--fs-dropdown-item-icon-margin-top`	`calc(-1 * var(--fs-spacing-1))`

Local token	Default value/Global token linked
`--fs-dropdown-menu-bkg-color`	`var(--fs-color-tertiary-bkg)`
`--fs-dropdown-menu-border-radius`	`var(--fs-border-radius)`
`--fs-dropdown-menu-box-shadow`	`var(--fs-shadow-hover)`

Local token	Default value/Global token linked
`--fs-dropdown-item-small-min-height`	`1.75rem`
`--fs-dropdown-item-small-padding`	`var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1)`
`--fs-dropdown-item-small-text-size`	`var(--fs-text-size-1)`

For further customization, you can use the following data attributes:

data-fs-dropdown-item

data-fs-dropdown-menu

data-fs-dropdown-overlay

data-fs-dropdown-menu

data-fs-dropdown-menu-size="small | regular"

data-fs-dropdown-button

This component inherits Button CSS selectors and styles.

Key	Description
`Enter`	When focusing on `DropdownButton`, the Dropdown menu opens and focuses the first `DropdownItem`
`ArrowDown`	When focusing on an item, moves focus to the next `DropdownItem`
`ArrowUp`	When focusing on an item, moves focus to the previous `DropdownItem`
`Escape`	Closes `DropdownMenu` and moves focus to `DropdownButton`
`Home`	When `DropdownMenu` is open, move focus to the first `DropdownItem`
`End`	When `DropdownMenu` is open, move focus to the last `DropdownItem`