Overlays & menusBrick 0.1.2

Dropdown Menu

Dropdown Menu provides button-triggered commands, persistent choices, and nested actions through Atom-owned semantics and behavior.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Dropdown Menu is the right part

Use it when

Use it for compact command sets opened from an explicit button.

Choose another path when

Do not use it for primary navigation, right-click-only discovery, a persistent desktop command bar, or a select field.

Installation and imports

tsx

import { DropdownMenu } from "@flowstack-ui/brick/dropdown-menu";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/dropdown-menu.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content>
      <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
      <DropdownMenu.Item tone="danger">Delete</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

Visual recipes and states

The overlay uses a raised surface, 32/44/48px sm/md/lg minimum rows, accent highlighting, visible disabled and danger states, selection indicators, and collision-aware nested content.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuArrow, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItemIndicator, DropdownMenuLeading, DropdownMenuItemLabel, DropdownMenuDescription, DropdownMenuShortcut, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuRootProps, DropdownMenuTriggerProps, DropdownMenuPortalProps, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuGroupProps, DropdownMenuLabelProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuItemIndicatorProps, DropdownMenuLeadingProps, DropdownMenuItemLabelProps, DropdownMenuDescriptionProps, DropdownMenuShortcutProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuSize, DropdownMenuItemTone.

Prop	Values	Default
`size`	`sm`, `md`, `lg`	`md`

Action-like rows accept the neutral or danger tone when exposed; neutral is the default. Behavioral props come from the matching Atom parts.

Shared responsibility

Accessibility

Name icon-only triggers and label every command or destination clearly. Preserve Atom roles, keyboard behavior, focus return, disabled and selection states, dismissal, and forced-colors affordances.

Responsive behavior

Popup geometry stays collision-aware and constrained to available space. Narrow layouts preserve usable targets, logical alignment, zoom, and writing direction; applications decide whether the pattern belongs in their mobile information architecture.

Stable visual contract

Styling and tokens

Customization

Set documented variables on Root or Content as applicable. Use className and style for local layout without replacing semantic state, focus, or positioning attributes.

Tokens and CSS hooks

Public variables use the --brick-dropdown-menu-* namespace for content surface, row geometry, supporting text, disabled and danger states, separators, indicators, focus, and motion.

Popup entry motion travels from the actual Atom data-side: bottom moves downward, top upward, right rightward, and left leftward. This includes a top or bottom side selected when a submenu cannot fit inline. Entry uses opacity and single-axis translation without scale motion.

Documented tokens are --brick-dropdown-menu-content-background, --brick-dropdown-menu-content-foreground, --brick-dropdown-menu-content-border, --brick-dropdown-menu-content-radius, --brick-dropdown-menu-content-shadow, --brick-dropdown-menu-content-padding, --brick-dropdown-menu-content-max-block-size, --brick-dropdown-menu-row-min-block-size, --brick-dropdown-menu-row-padding-inline, --brick-dropdown-menu-row-gap, --brick-dropdown-menu-row-radius, --brick-dropdown-menu-row-foreground, --brick-dropdown-menu-row-highlighted-background, --brick-dropdown-menu-row-highlighted-foreground, --brick-dropdown-menu-description-foreground, --brick-dropdown-menu-shortcut-foreground, --brick-dropdown-menu-label-foreground, --brick-dropdown-menu-disabled-foreground, --brick-dropdown-menu-danger-foreground, --brick-dropdown-menu-danger-background, --brick-dropdown-menu-separator-color, --brick-dropdown-menu-indicator-size, --brick-dropdown-menu-focus-ring, --brick-dropdown-menu-motion-duration.

Stable output includes data-size, component data-slot hooks, and Atom state attributes.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground