Overlays

DropdownGroup

Accessible group boundary that clusters related dropdown-item rows inside a dropdown-menu.

import { DropdownGroup } from '@lostgradient/cinder/dropdown-group';
overlaymenu
01

Overview

Accessible group boundary that clusters related dropdown-item rows inside a dropdown-menu.

Usage

svelte 
<script lang="ts">
  import DropdownGroup from '@lostgradient/cinder/dropdown-group';
  import DropdownItem from '@lostgradient/cinder/dropdown-item';
</script>

<DropdownGroup label="Actions">
  <DropdownItem onclick={() => {}}>Duplicate</DropdownItem>
  <DropdownItem onclick={() => {}}>Archive</DropdownItem>
</DropdownGroup>

Guidance

Use When

  • Grouping related dropdown actions under one accessible heading.
  • Pairing dropdown-label with a role='group' container inside dropdown-menu.

Avoid When

  • Rendering a clickable row — use dropdown-item.
  • Separating sections without a group label — use dropdown-separator.
02

When to use

Use when
  • Grouping related dropdown actions under one accessible heading.
  • Pairing dropdown-label with a role='group' container inside dropdown-menu.
Avoid when
  • Rendering a clickable row — use dropdown-item.
  • Separating sections without a group label — use dropdown-separator.
03

Props

Props for dropdown-group
NameTypeDefaultDescription
children snippet DropdownLabel plus grouped DropdownItem rows.
label required text Accessible label for the group, applied as aria-label. Provide exactly one of label or ariaLabelledby.
ariaLabelledby text ID of an existing element whose text labels the group, applied as aria-labelledby. Provide exactly one of label or ariaLabelledby.