Dropdown Item
<quiet-dropdown-item>
Dropdown items can be selected from inside a dropdown menu.
This component must only be used within a dropdown. You can see some examples of dropdown items being used in the dropdown documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-dropdown-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/dropdown-item/dropdown-item.js';
To manually import <quiet-dropdown-item> from npm, use the following code.
import '@quietui/quiet/dist/components/dropdown-item/dropdown-item.js';
Slots Jump to heading
Dropdown Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The item's label or description. |
icon
|
An optional icon to show at the start of the item. |
details
|
Optional details, such as a keyboard shortcut, to display at the end of the item. |
Properties Jump to heading
Dropdown Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
An optional value for the menu item. This is useful for determining which item was selected when
listening to the dropdown's quiet-select event.
|
|
string
|
|
type
|
Set to checkbox to make the item a checkbox. |
|
'normal'
|
'normal'
|
variant
|
The type of menu item to render. |
|
'destructive'
|
'default'
|
checked
|
Set to true to check the dropdown item. Only valid when type is checkbox.
|
|
boolean
|
false
|
disabled
|
Disables the dropdown item. |
|
boolean
|
false
|
CSS parts Jump to heading
Dropdown Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
checkmark |
The checkmark icon that's shown when checked, a <quiet-icon> element.
|
::part(checkmark)
|
checkmark__svg |
The checkmark icon's svg part. |
::part(checkmark__svg)
|
icon |
The container that wraps the icon. |
::part(icon)
|
label |
The container that wraps the label. |
::part(label)
|
details |
The container that wraps the menu item's details. |
::part(details)
|
Custom States Jump to heading
Dropdown Item has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
active |
Applied when the dropdown item is active. |
:state(active)
|
disabled |
Applied when the dropdown item is disabled. |
:state(disabled)
|
checked |
Applied when the dropdown item is checked. |
:state(checked)
|