Dropdown Item

<afp-dropdown-item>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A dropdown item component to be used within an AfpDropdown.

Dropdown Item

<afp-dropdown-item>Dropdown Item</afp-dropdown-item>

<afp-dropdown-item>Dropdown Item</afp-dropdown-item>

<AfpDropdownItem>Dropdown Item</AfpDropdownItem>

<AfpDropdownItem>Dropdown Item</AfpDropdownItem>

Examples #

Details #

Use the details slot to add additional information to the dropdown item.

Details Item Ctrl

Details Item 23

Details Item Lorem ipsum

<afp-dropdown-item>
  Details Item
  <kbd slot="details">Ctrl</kbd>
</afp-dropdown-item>
<afp-dropdown-item>
  Details Item
  <afp-badge slot="details" variant="brand" shape="pill">23</afp-badge>
</afp-dropdown-item>
<afp-dropdown-item>
  <afp-icon name="box-arrow-in-down-right"></afp-icon>
  Details Item
  <span slot="details">Lorem ipsum</span>
</afp-dropdown-item>

<afp-dropdown-item>
  Details Item
  <kbd slot="details">Ctrl</kbd>
</afp-dropdown-item>
<afp-dropdown-item>
  Details Item
  <afp-badge [slot]="'details'" [variant]="'brand'" [shape]="'pill'">23</afp-badge>
</afp-dropdown-item>
<afp-dropdown-item>
  <afp-icon [name]="'box-arrow-in-down-right'"></afp-icon>
  Details Item
  <span slot="details">Lorem ipsum</span>
</afp-dropdown-item>

<AfpDropdownItem>
  Details Item
  <kbd slot="details">Ctrl</kbd>
</AfpDropdownItem>
<AfpDropdownItem>
  Details Item
  <AfpBadge slot="details" variant="brand" shape="pill">23</AfpBadge>
</AfpDropdownItem>
<AfpDropdownItem>
  <AfpIcon name="box-arrow-in-down-right"></AfpIcon>
  Details Item
  <span slot="details">Lorem ipsum</span>
</AfpDropdownItem>

<AfpDropdownItem>
  Details Item
  <kbd slot="details">Ctrl</kbd>
</AfpDropdownItem>
<AfpDropdownItem>
  Details Item
  <AfpBadge :slot="'details'" :variant="'brand'" :shape="'pill'">23</AfpBadge>
</AfpDropdownItem>
<AfpDropdownItem>
  <AfpIcon :name="'box-arrow-in-down-right'"></AfpIcon>
  Details Item
  <span slot="details">Lorem ipsum</span>
</AfpDropdownItem>

Value #

The value attribute can be used to identify the dropdown item when it is clicked.

Toggle checked

<afp-dropdown-item id="toggle-checked" value="toggle-checked">Toggle checked</afp-dropdown-item>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');
    
    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

<afp-dropdown-item [id]="'toggle-checked'" [value]="'toggle-checked'">Toggle checked</afp-dropdown-item>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');
    
    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

<AfpDropdownItem id="toggle-checked" value="toggle-checked">Toggle checked</AfpDropdownItem>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');
    
    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

<AfpDropdownItem :id="'toggle-checked'" :value="'toggle-checked'">Toggle checked</AfpDropdownItem>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const toggleChecked = document.getElementById('toggle-checked');
    
    toggleChecked.addEventListener('afp-click', (event) => {
      console.log(`${event.detail} clicked!`)
      toggleChecked.checked = !toggleChecked.checked;
    });
  });
</script>

Checked #

Use the checked attribute to indicate the checked state of the dropdown item.

Checked Item

<afp-dropdown-item checked>Checked Item</afp-dropdown-item>

<afp-dropdown-item checked>Checked Item</afp-dropdown-item>

<AfpDropdownItem checked>Checked Item</AfpDropdownItem>

<AfpDropdownItem checked>Checked Item</AfpDropdownItem>

Active #

Use the active attribute to indicate the active state of the dropdown item.

Active Item

<afp-dropdown-item active>Active Item</afp-dropdown-item>

<afp-dropdown-item active>Active Item</afp-dropdown-item>

<AfpDropdownItem active>Active Item</AfpDropdownItem>

<AfpDropdownItem active>Active Item</AfpDropdownItem>

Disabled #

Use the disabled attribute to disable the dropdown item.

Disabled Item

<afp-dropdown-item disabled>Disabled Item</afp-dropdown-item>

<afp-dropdown-item disabled>Disabled Item</afp-dropdown-item>

<AfpDropdownItem disabled>Disabled Item</AfpDropdownItem>

<AfpDropdownItem disabled>Disabled Item</AfpDropdownItem>

Custom Icons #

Use the check-icon slot to add a custom icon when the dropdown item is checked.

Details Item Ctrl

<afp-dropdown-item checked>
  Details Item
  <afp-icon slot="check-icon" name="x">Ctrl</afp-icon>
</afp-dropdown-item>

<afp-dropdown-item checked>
  Details Item
  <afp-icon [slot]="'check-icon'" [name]="'x'">Ctrl</afp-icon>
</afp-dropdown-item>

<AfpDropdownItem checked>
  Details Item
  <AfpIcon slot="check-icon" name="x">Ctrl</AfpIcon>
</AfpDropdownItem>

<AfpDropdownItem checked>
  Details Item
  <AfpIcon :slot="'check-icon'" :name="'x'">Ctrl</AfpIcon>
</AfpDropdownItem>

Custom Height #

Use the --afp-dropdown-item-height CSS variable to set a custom height for the dropdown item.

Custom Height

<afp-dropdown-item style="--afp-dropdown-item-height: 3rem" active>Custom Height</afp-dropdown-item>

<afp-dropdown-item [style]="'--afp-dropdown-item-height: 3rem'" active>Custom Height</afp-dropdown-item>

<AfpDropdownItem style="--afp-dropdown-item-height: 3rem" active>Custom Height</AfpDropdownItem>

<AfpDropdownItem :style="'--afp-dropdown-item-height: 3rem'" active>Custom Height</AfpDropdownItem>

Properties

Learn more about properties.

Name	Description	Reflects
`value`	The value associated with the dropdown item. This is emitted with the afp-click event. Type `string`
`checked`	Indicates whether the dropdown item is checked. Type `boolean` Default `false`
`active`	Indicates whether the dropdown item is active (highlighted). Type `boolean` Default `false`
`disabled`	Indicates whether the dropdown item is disabled. Type `boolean` Default `false`

Methods

Learn more about using methods.

Name	Description	Arguments
`focus`	Sets focus on the dropdown item.	`options<FocusOptions>` — Optional focus options.
`activate`	Activates the dropdown item, triggering the click handler.	-

Events

Learn more about events.

Name	Return	Description
`afp-click`	`string`	Emitted when the dropdown item is clicked.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.
`details`	Slot for additional details or description.
`check-icon`	Slot to replace the default check icon.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`content`	The content wrapper.	`::part(content)`
`checked`	The checked icon wrapper.	`::part(checked)`
`check-icon`	The check icon.	`::part(check-icon)`
`label`	The label wrapper.	`::part(label)`
`details`	The details wrapper.	`::part(details)`

CSS Custom Properties

Name	Description	Default
`--afp-dropdown-item-height`	The height of the dropdown item.	`--afp-size-xs`
`--afp-dropdown-item-checked-min-width`	The minimum width of the checked icon area.	`1.125rem`
`--afp-dropdown-item-disabled-opacity`	The opacity of a disabled dropdown item.	`0.5`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`check-icon` - The check icon.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/dropdown-item/dropdown-item.js';