e8-dropdown-group
Updated on Sep 18, 2025 8 minutes to readA container component for grouping related dropdown items under a labeled section within an e8-dropdown menu.
Overview
e8-dropdown-group allows you to organize dropdown items into logical sections, each optionally labeled with a header.
This improves readability when a dropdown menu contains many actions or categories.
You can customize the header tag, text color, and class, and optionally add custom content using a named slot.
<!-- Dropdown menu with grouped items -->
<e8-dropdown text="Project Actions">
<e8-dropdown-group header="Project Management">
<e8-dropdown-item>Overview</e8-dropdown-item>
<e8-dropdown-item>Statistics</e8-dropdown-item>
</e8-dropdown-group>
<e8-dropdown-divider></e8-dropdown-divider>
<e8-dropdown-group
header="Settings"
header-variant="secondary"
>
<e8-dropdown-item>Access Control</e8-dropdown-item>
<e8-dropdown-item>Integrations</e8-dropdown-item>
</e8-dropdown-group>
</e8-dropdown>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| aria-describedby | Adds an ARIA descriptor ID for accessibility. | string | — |
| header | Optional text label displayed above the grouped dropdown items. | string | — |
| header-class | Custom CSS class or classes applied to the header element. | E8CssClassType | — |
| header-tag | HTML tag used to render the header (e.g., header, div, h6). | string | 'header' |
| header-variant | Text color variant applied to the header. | E8TextColorVariants | — |
Slots
| Slot | Description |
|---|---|
| default | The list of dropdown items included in the group. |
| header | Optional slot for inserting custom header content. |