Dropdown Item
<cs-dropdown-item>
Dropdown items represent selectable entries within a dropdown menu, including standard actions, checkable items, and submenu triggers.
This component must be used as a child of <cs-dropdown>. Please see the Dropdown docs to see examples of this component in action.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/dropdown-item/dropdown-item.js';
import './cornerstone/components/dropdown-item/dropdown-item.js';
import CsDropdownItem from '@cruglobal/cornerstone-components/react/dropdown-item/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The dropdown item's label. |
details | Additional content or details to display after the label. |
icon | An optional icon to display before the label. |
submenu | Submenu items, typically <cs-dropdown-item> elements, to create a nested menu. |
Attributes & Properties
Learn more about attributes and properties.
| Property | Attribute | Description | Type | Default | Reflects |
|---|---|---|---|---|---|
checked | checked | Set to true to check the dropdown item. Only valid when type is checkbox. | boolean | false | — |
disabled | disabled | Disables the dropdown item. | boolean | false | Yes |
submenuOpen | submenuOpen | Whether the submenu is currently open. | boolean | false | Yes |
type | type | Set to checkbox to make the item a checkbox. | 'normal' | 'checkbox' | 'normal' | Yes |
value | value | An optional value for the menu item. This is useful for determining which item was selected when listening to the dropdown's cs-select event. | string | — | — |
variant | variant | The type of menu item to render. | 'danger' | 'neutral' | 'neutral' | Yes |
Methods
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
closeSubmenu() | Closes the submenu. | — |
openSubmenu() | Opens the submenu. | — |
Events
Learn more about events.
| Name | Description |
|---|---|
blur | Emitted when the dropdown item loses focus. |
focus | Emitted when the dropdown item gains focus. |
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
checkmark | The checkmark icon (a <cs-icon> element) when the item is a checkbox. | ::part(checkmark) |
checkmark__svg | The checkmark icon's svg part. | ::part(checkmark__svg) |
details | The container for the details slot. | ::part(details) |
icon | The container for the icon slot. | ::part(icon) |
label | The container for the label slot. | ::part(label) |
submenu | The submenu container. | ::part(submenu) |
submenu-icon | The submenu indicator icon (a <cs-icon> element). | ::part(submenu-icon) |
submenu-icon__svg | The submenu icon's svg part. | ::part(submenu-icon__svg) |
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.