e8-dropdown-item
Updated on Sep 18, 2025 8 minutes to readA single actionable item inside an e8-dropdown menu.
Overview
e8-dropdown-item represents a clickable or linkable option within a dropdown menu.
It supports active and disabled states, custom styling through classes and text variants, and allows you to specify a URL and target.
Use this component to define individual actions or navigation links inside a dropdown.
<!-- Basic dropdown item -->
<e8-dropdown text="Options">
<e8-dropdown-item href="/profile">Profile</e8-dropdown-item>
<e8-dropdown-item href="/settings">Settings</e8-dropdown-item>
<e8-dropdown-item disabled>Disabled Item</e8-dropdown-item>
</e8-dropdown>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| active | Marks the item as active, typically highlighted. | boolean | false |
| disabled | Disables the item so it cannot be clicked. | boolean | false |
| href | The URL the item links to. | string | '#' |
| link-class | Custom CSS classes applied to the link element. | E8CssClassType | — |
| target | Specifies where to open the linked URL. | string | 'self' |
| variant | Text color variant applied when item is not active or disabled. | E8TextColorVariants | — |
Slots
| Slot | Description |
|---|---|
| default | Content of the button, typically text or icons. |