components

Dropdown Menu

Dropdown menus present a list of actions or options that appear when triggered. Use DropdownButton for a self-contained button that opens a menu, or DropdownMenu to wrap a custom trigger element. Menu items are provided via the options prop using MenuItem components.

Import
import { DropdownMenu } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Present a searchable/filterable dropdown list.
  • +When users need to search through a large list of options.
  • +For combo-box style selection with custom rendering.

When not to use

  • −For simple select with few options — use InputSelect.
  • −For multi-select — use InputMultiselect.
  • −For a button that triggers a menu — use DropdownButton.

Examples

Code Samples

DropdownButton (Basic)

A self-contained dropdown button that opens a menu of actions. Use the options prop to provide MenuItem elements.

import { DropdownButton, MenuItem } from "@skedulo/breeze-ui-react";

export default function BasicDropdownButton() {
  return (
    <DropdownButton
      buttonType="secondary"
      options={
        <>
          <MenuItem value="edit">Edit</MenuItem>
          <MenuItem value="duplicate">Duplicate</MenuItem>
          <MenuItem value="delete">Delete</MenuItem>
        </>
      }
    >
      Actions
    </DropdownButton>
  );
}

DropdownButton with Trailing Icon

A dropdown button with a chevron icon indicating it opens a menu.

import { DropdownButton, MenuItem } from "@skedulo/breeze-ui-react";

export default function DropdownWithIcon() {
  return (
    <DropdownButton
      buttonType="secondary"
      trailingIcon="chevronDown"
      options={
        <>
          <MenuItem value="csv">Export as CSV</MenuItem>
          <MenuItem value="pdf">Export as PDF</MenuItem>
          <MenuItem value="xlsx">Export as Excel</MenuItem>
        </>
      }
    >
      Export
    </DropdownButton>
  );
}

DropdownMenu with Custom Trigger

Use DropdownMenu to wrap a custom trigger element such as a Button. The child element becomes the trigger that opens the menu.

import { DropdownMenu, MenuItem, Button } from "@skedulo/breeze-ui-react";

export default function CustomTriggerDropdown() {
  return (
    <DropdownMenu
      options={
        <>
          <MenuItem value="profile">View Profile</MenuItem>
          <MenuItem value="settings">Settings</MenuItem>
          <MenuItem value="help">Help Center</MenuItem>
          <MenuItem value="logout">Sign Out</MenuItem>
        </>
      }
    >
      <Button buttonType="secondary" trailingIcon="chevronDown">
        My Account
      </Button>
    </DropdownMenu>
  );
}

Disabled Menu Items

Individual menu items can be disabled to prevent interaction while still showing the option.

import { DropdownMenu, MenuItem, Button } from "@skedulo/breeze-ui-react";

export default function DisabledItemsDropdown() {
  return (
    <DropdownMenu
      options={
        <>
          <MenuItem value="view">View Details</MenuItem>
          <MenuItem value="edit">Edit Record</MenuItem>
          <MenuItem value="archive" disabled>
            Archive (no permission)
          </MenuItem>
          <MenuItem value="delete" disabled>
            Delete (no permission)
          </MenuItem>
        </>
      }
    >
      <Button buttonType="secondary">More Options</Button>
    </DropdownMenu>
  );
}

Guidelines

Do

  • ✓Enable search for lists with more than 10 items.
  • ✓Provide clear option labels.
  • ✓Handle empty/no-results states gracefully.

Don't

  • ✗Don't use for navigation.
  • ✗Don't nest dropdown menus.

API Reference

PropTypeDefaultDescription
options*ReactNode—The menu items to display, provided as MenuItem elements wrapped in a fragment. Used on both DropdownButton and DropdownMenu.
buttonType"primary" | "secondary" | "transparent"—The visual style of the DropdownButton trigger. Works the same as the Button component's buttonType prop.
trailingIconstring—An icon displayed after the button text in DropdownButton (e.g. "chevronDown").
menuSize"small" | "medium""medium"Controls the width of the dropdown menu panel. Use small for short option lists.
children*ReactNode—For DropdownButton, the button label text. For DropdownMenu, the custom trigger element (e.g. a Button).

Related Components

Input SelectMenuDropdownButtonInputMultiselect