e8-dropdown-header
Updated on Sep 18, 2025 4 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.
<!-- Basic header inside dropdown -->
<e8-dropdown text="Menu">
<e8-dropdown-header>Profile Section</e8-dropdown-header>
<e8-dropdown-item>Settings</e8-dropdown-item>
<e8-dropdown-item>Logout</e8-dropdown-item>
</e8-dropdown>
<!-- Colored header with variant -->
<e8-dropdown text="Notifications">
<e8-dropdown-header variant="primary">Messages</e8-dropdown-header>
<e8-dropdown-item>New message from John</e8-dropdown-item>
<e8-dropdown-item>System alert</e8-dropdown-item>
</e8-dropdown>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| tag | HTML tag used for rendering the header. | string | 'header' |
| variant | Text color variant. | E8TextColorVariants | — |
Slots
Slots
| Slot | Description |
|---|---|
| default | Content of the button, typically text or icons. |