Documentation
Feedback
Guides
Storefront Development

Storefront Development
Dropdown

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

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

Overview

Example
Code

Import

Import the component from @faststore/ui

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

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Example
Code

Props

NameTypeDescriptionDefault
onDismiss() => voidEvent emitted when the Dropdown is closed.
isOpenfalse | trueA boolean value that represents the state of the Dropdown.
idstringID to identify Dropdown.fs-dropdown
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-dropdown-item
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-dropdown-menu
aria-labelledbystringIdentifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
onDismiss(event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => voidThis function is called whenever the user hits "Escape" or clicks outside the dialog.
size"small" | "regular"Specifies the size variant.regular
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-dropdown-button
aria-labelstringFor accessibility purposes, add an ARIA label to the element when it doesn't have a label.
size"small" | "regular"Specifies the size variant.
disabledfalse | trueSpecifies that this button should be disabled.
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.
loadingfalse | trueBoolean that represents a loading state.
loadingLabelstringSpecifies a label for loading state.
iconPosition"left" | "right"Specifies where the icon should be positioned

Design Tokens

Compound Components

Dropdown Item

Local tokenDefault value/Global token linked
--fs-dropdown-item-min-height2.375rem
--fs-dropdown-item-paddingvar(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1) var(--fs-spacing-1)
--fs-dropdown-item-text-sizevar(--fs-text-size-base)
--fs-dropdown-item-text-weightvar(--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-colorvar(--fs-border-color-light)
--fs-dropdown-item-icon-min-width1.125rem
--fs-dropdown-item-icon-margin-rightvar(--fs-spacing-0)
--fs-dropdown-item-icon-margin-topcalc(-1 * var(--fs-spacing-1))

Dropdown Menu

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

Variants

Small

Local tokenDefault value/Global token linked
--fs-dropdown-item-small-min-height1.75rem
--fs-dropdown-item-small-paddingvar(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-1)
--fs-dropdown-item-small-text-sizevar(--fs-text-size-1)

Customization

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

Dropdown Item

data-fs-dropdown-item

Dropdown Menu

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

Dropdown Button

data-fs-dropdown-button
This component inherits Button CSS selectors and styles.

Accessibility

Keyboard Interactions


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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page