e8-dropdown
Updated on Sep 18, 2025 38 minutes to readA flexible dropdown component with optional split button, toggle button, and menu.
Overview
e8-dropdown provides a fully customizable dropdown interface that supports split button mode, a toggle button, and menu positioning in any direction (up, down, left, or right). It allows lazy rendering of the menu, application of custom styles, and selection of button shapes such as rounded or pill. The component also emits events for split button clicks and includes accessibility support through ARIA roles.
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('onSplitClick', () => {
E8App.$notify.success('Split button clicked');
});
🔽 Show more
Copy this snippet into the Content section
<div class="example-wrapper space-y-4">
<!-- Basic dropdown with a list of actions -->
<e8-dropdown text="Options">
<e8-dropdown-item>View details</e8-dropdown-item>
<e8-dropdown-item>Duplicate</e8-dropdown-item>
<e8-dropdown-item>Archive</e8-dropdown-item>
</e8-dropdown>
<!-- Right-aligned dropdown menu -->
<e8-dropdown
text="More actions"
right
>
<e8-dropdown-item>Download</e8-dropdown-item>
<e8-dropdown-item>Share</e8-dropdown-item>
</e8-dropdown>
<!-- Split button dropdown with primary color and split click event -->
<e8-dropdown
text="Profile"
split
variant="primary"
on-split-click="handleSplitClick"
>
<e8-dropdown-item>Account settings</e8-dropdown-item>
<e8-dropdown-item>Logout</e8-dropdown-item>
</e8-dropdown>
<!-- Lazy dropdown that loads items only when opened -->
<e8-dropdown
text="Load on demand"
:lazy="true"
>
<e8-dropdown-item>Lazy item 1</e8-dropdown-item>
<e8-dropdown-item>Lazy item 2</e8-dropdown-item>
</e8-dropdown>
<!-- Dropdown with group, header text, divider, and link -->
<e8-dropdown
text="User menu"
variant="secondary"
>
<e8-dropdown-header>Account</e8-dropdown-header>
<e8-dropdown-item>Profile</e8-dropdown-item>
<e8-dropdown-item>Settings</e8-dropdown-item>
<e8-dropdown-divider></e8-dropdown-divider>
<e8-dropdown-header>Support</e8-dropdown-header>
<e8-dropdown-item href="https://help.example.com">Help Center</e8-dropdown-item>
<e8-dropdown-item>Contact us</e8-dropdown-item>
</e8-dropdown>
</div>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| block | Makes the dropdown button full-width. | boolean | false |
| boundary | Element or string defining the boundary for dropdown positioning. | HTMLElement | String | 'scrollParent' |
| circle | Renders the toggle button as a circle. | boolean | false |
| disabled | Disables the dropdown toggle and split buttons. | boolean | false |
| dropleft | Positions the dropdown menu to the left. | boolean | false |
| dropright | Positions the dropdown menu to the right. | boolean | false |
| dropup | Positions the dropdown menu above the toggle button. | boolean | false |
| lazy | Defers rendering of dropdown menu until first open. | boolean | false |
| menu-class | Custom classes for the dropdown menu. | E8CssClassType | — |
| no-caret | Hides the caret icon on the toggle button. | boolean | false |
| no-flip | Disables automatic flipping of the dropdown to fit viewport. | boolean | false |
| offset | Custom offset for dropdown menu positioning. | number | string | — |
| outlined | Uses outlined style for the toggle button. | boolean | false |
| pill | Renders the toggle button with pill shape. | boolean | true |
| right | Aligns dropdown menu to the right side. | boolean | false |
| role | ARIA role of the dropdown menu. | string | 'menu' |
| size | Size of the toggle button. | E8ElementSizes | 'default' |
| split | Enables split button mode. | boolean | false |
| split-class | Custom classes for the split button. | E8CssClassType | — |
| split-href | Optional href for the split button. | string | — |
| split-outlined | Applies outlined style to the split button. | boolean | false |
| split-variant | Variant color for the split button. | E8ButtonColorVariants | — |
| text | Text displayed on the toggle or split button. | string | — |
| toggle-class | Custom classes for the toggle button. | E8CssClassType | — |
| toggle-tag | HTML tag to use for the toggle button. | string | 'button' |
| toggle-text | Text for the toggle button when split mode is used. | string | 'Toggle dropdown' |
| variant | Variant color for the toggle button. | E8ButtonColorVariants | 'secondary' |
| visible | Controls dropdown visibility. | boolean | — |
Slots
| Slot | Description |
|---|---|
| default | Content of the dropdown menu. Can include links, buttons, or other elements. |
| button-content | Custom content for the toggle button. If empty, uses text or toggle-text. |
| split-content | Custom content for the split button. If empty, uses text. |
Events
| Event | Description |
|---|---|
| on-split-click | Event or method triggered when the split button is clicked. |