Overlays

DropdownSeparator

Horizontal divider with role="separator" that visually segments groups of rows inside a dropdown-menu.

import { DropdownSeparator } from '@lostgradient/cinder/dropdown-separator';
overlaymenu
01

Overview

Visual divider between groups of items within a dropdown menu.

Usage

DropdownSeparator is a compose-only leaf of Dropdown. The idiomatic API is Dropdown.Separator, reached through the parent namespace — see the dropdown README for the composed snippet. The flat @lostgradient/cinder/dropdown-separator subpath remains exported for à-la-carte builds that import the leaf directly.

02

When to use

Use when
  • Visually splitting unrelated groups of dropdown-item rows without adding a heading.
  • Marking a boundary between primary actions and destructive or secondary actions in a menu.
Avoid when
  • Labeling a section of items — use dropdown-label so the group has an accessible heading.
  • Rendering an interactive row — use dropdown-item.