Balance Logo
Balance
Reckon Design System

Dropdown

Dropdowns are contextual overlays for displaying lists of links or actions that the user can take.
Install
pnpm add @reckon-web/dropdown
Import usage
import {
DropdownButton,
DropdownMenu,
Menu,
MenuItem,
MenuDivider,
MenuGroup
} from '@reckon-web/dropdown';
  • Code
  • API

Dropdown menu should be used when additional options are available to the user and there is a space constraint.

Usage

Basic

The text within a dropdown menu should be direct so users can quickly decide on an action.

Open in Playroom

Tones

Provide a tone to help convey the implication of an item's action. Actions that could cause a significant change to the user’s data (remove employee, delete pay run, etc.) should use the critical tone.

Icons

Provide an icon if it will help clarify the intent of the item's action.

We recommend aligning the menu "right" when the trigger is right-aligned within its container.

Groups and Dividers

Use groups and dividers to separate items into appropriate sections.

Disabled

Menu items can be disabled with a disabled prop.

Item Overflow

When there are many items in a dropdown menu it will grow to a maximum height and the overflowing items will be scrollable.

Long labels will be truncated to avoid blowing out the menu width.

Custom Trigger

The trigger prop also accepts a function to render a custom trigger element.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.