Dropdown

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 the component from @faststore/ui


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

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.

Example

Code

Name	Type	Description	Default
onDismiss	`() => void`	Event emitted when the Dropdown is closed.
isOpen	`false \| true`	A boolean value that represents the state of the Dropdown.
id	`string`	ID to identify Dropdown.	`fs-dropdown`

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-dropdown-item`
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-dropdown-menu`
aria-labelledby	`string`	Identifies 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>) => void`	This function is called whenever the user hits "Escape" or clicks outside the dialog.
size	`"small" \| "regular"`	Specifies the size variant.	`regular`

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-dropdown-button`
aria-label	`string`	For accessibility purposes, add an ARIA label to the element when it doesn't have a label.
size	`"small" \| "regular"`	Specifies the size variant.
disabled	`false \| true`	Specifies that this button should be disabled.
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.
loading	`false \| true`	Boolean that represents a loading state.
loadingLabel	`string`	Specifies a label for loading state.
iconPosition	`"left" \| "right"`	Specifies where the icon should be positioned

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`