Dropdown

Name: Boreal UI
Author: Davin Chiupka

The Dropdown component provides a menu for users to select from options, with customizable appearance, alignment, and items.

Usage & Examples

Default

default.tsx

<Dropdown
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />

Visual variants

Themes

primary

secondary

tertiary

quaternary

States

success

warning

error

info

Variants

solid

outline

glass

visual-variants.tsx

// Themes
<Dropdown theme="primary"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown theme="secondary"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown theme="tertiary"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown theme="quaternary"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />

// States
<Dropdown state="success"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown state="warning"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown state="error"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown state="info"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />

// Variants
<Dropdown variant="solid"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown variant="outline"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />
<Dropdown variant="glass"
    items={[
      { label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
      { label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
      { label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
    ]}
  />

Props API

Dropdown props API
				Default	Description
`align`	`"start" \| "end"`	No	props	`"end"`	Menu alignment relative to the trigger ('start' \| 'end').
`aria-describedby`	`string`	No	aria	`—`	Accessible description id(s) for the trigger button.
`aria-label`	`string`	No	aria	`"Dropdown menu"`	Whether to use the outline style on the toggle button. Accessible label for the trigger button. Prefer this when the trigger is icon-only.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelledby target for the trigger button.
`className`	`string`	No	styling	`—`	Custom class name for the dropdown wrapper.
`closeOnSelect`	`boolean`	No	props	`true`	Whether the menu should close after selecting an item. Default is usually true for action menus.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`focusFirstItemOnOpen`	`boolean`	No	props	`true`	Whether keyboard focus should move to the first item when the menu opens. Default behavior in your base already does this logically.
`items`	`DropdownItem[]`	Yes	props	`—`	Array of items to render in the dropdown menu.
`menuAriaDescribedBy`	`string`	No	props	`—`	Accessible description id(s) for the menu.
`menuAriaLabel`	`string`	No	props	`—`	Accessible label for the menu itself. Falls back to `aria-label` in many implementations.
`menuAriaLabelledBy`	`string`	No	props	`—`	Accessible labelledby target for the menu. Prefer this over `menuAriaLabel` when visible text labels the menu.