Dropdown

<afp-dropdown>

stable

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

A dropdown component that displays a list of actions or options when triggered.

Dropdown

Dropdown Item

<afp-dropdown>
  <afp-button slot="trigger" caret>Dropdown</afp-button>

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

<afp-dropdown>
  <afp-button [slot]="'trigger'" caret>Dropdown</afp-button>

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

<AfpDropdown>
  <AfpButton slot="trigger" caret>Dropdown</AfpButton>

  <AfpDropdownItem>Dropdown Item</AfpDropdownItem>
  <AfpDropdownItem>Dropdown Item</AfpDropdownItem>
</AfpDropdown>

<AfpDropdown>
  <AfpButton :slot="'trigger'" caret>Dropdown</AfpButton>

  <AfpDropdownItem>Dropdown Item</AfpDropdownItem>
  <AfpDropdownItem>Dropdown Item</AfpDropdownItem>
</AfpDropdown>

Examples #

Keep Open #

Dropdowns can remain open after selecting an item by adding the keep attribute to the <afp-dropdown> component.

John Doe

Profile

Settings

Notifications 23

Logout

<afp-dropdown keep>
  <afp-button slot="trigger" appearance="filled" variant="neutral" caret>
    <afp-avatar size="small" shape="pill" image="https://picsum.photos/100" style="--afp-avatar-border-width: 0"></afp-avatar>
    John Doe
  </afp-button>

  <afp-dropdown-item><afp-icon name="person"></afp-icon>Profile</afp-dropdown-item>
  <afp-dropdown-item><afp-icon name="gear"></afp-icon>Settings</afp-dropdown-item>
  <afp-dropdown-item>
    <afp-icon name="bell"></afp-icon>
    Notifications
    <afp-badge slot="details" variant="brand" shape="pill">23</afp-badge>
  </afp-dropdown-item>
  <hr/>
  <afp-dropdown-item style="color: var(--afp-color-error-500)"><afp-icon name="box-arrow-right"></afp-icon>Logout</afp-dropdown-item>
</afp-dropdown>

<afp-dropdown keep>
  <afp-button [slot]="'trigger'" [appearance]="'filled'" [variant]="'neutral'" caret>
    <afp-avatar [size]="'small'" [shape]="'pill'" [image]="'https://picsum.photos/100'" [style]="'--afp-avatar-border-width: 0'"></afp-avatar>
    John Doe
  </afp-button>

  <afp-dropdown-item><afp-icon [name]="'person'"></afp-icon>Profile</afp-dropdown-item>
  <afp-dropdown-item><afp-icon [name]="'gear'"></afp-icon>Settings</afp-dropdown-item>
  <afp-dropdown-item>
    <afp-icon [name]="'bell'"></afp-icon>
    Notifications
    <afp-badge [slot]="'details'" [variant]="'brand'" [shape]="'pill'">23</afp-badge>
  </afp-dropdown-item>
  <hr/>
  <afp-dropdown-item [style]="'color: var(--afp-color-error-500)'"><afp-icon [name]="'box-arrow-right'"></afp-icon>Logout</afp-dropdown-item>
</afp-dropdown>

<AfpDropdown keep>
  <AfpButton slot="trigger" appearance="filled" variant="neutral" caret>
    <AfpAvatar size="small" shape="pill" image="https://picsum.photos/100" style="--afp-avatar-border-width: 0"></AfpAvatar>
    John Doe
  </AfpButton>

  <AfpDropdownItem><AfpIcon name="person"></AfpIcon>Profile</AfpDropdownItem>
  <AfpDropdownItem><AfpIcon name="gear"></AfpIcon>Settings</AfpDropdownItem>
  <AfpDropdownItem>
    <AfpIcon name="bell"></AfpIcon>
    Notifications
    <AfpBadge slot="details" variant="brand" shape="pill">23</AfpBadge>
  </AfpDropdownItem>
  <hr/>
  <AfpDropdownItem style="color: var(--afp-color-error-500)"><AfpIcon name="box-arrow-right"></AfpIcon>Logout</AfpDropdownItem>
</AfpDropdown>

<AfpDropdown keep>
  <AfpButton :slot="'trigger'" :appearance="'filled'" :variant="'neutral'" caret>
    <AfpAvatar :size="'small'" :shape="'pill'" :image="'https://picsum.photos/100'" :style="'--afp-avatar-border-width: 0'"></AfpAvatar>
    John Doe
  </AfpButton>

  <AfpDropdownItem><AfpIcon :name="'person'"></AfpIcon>Profile</AfpDropdownItem>
  <AfpDropdownItem><AfpIcon :name="'gear'"></AfpIcon>Settings</AfpDropdownItem>
  <AfpDropdownItem>
    <AfpIcon :name="'bell'"></AfpIcon>
    Notifications
    <AfpBadge :slot="'details'" :variant="'brand'" :shape="'pill'">23</AfpBadge>
  </AfpDropdownItem>
  <hr/>
  <AfpDropdownItem :style="'color: var(--afp-color-error-500)'"><AfpIcon :name="'box-arrow-right'"></AfpIcon>Logout</AfpDropdownItem>
</AfpDropdown>

Max Height #

You can set a maximum height for the dropdown using the --afp-dropdown-max-height CSS variable. If the content exceeds this height, a scrollbar will appear.

View

Grid

Source

Canvas

Preview

Fullscreen

Preferences...

<afp-dropdown style="--afp-dropdown-max-height: 20rem">
  <afp-button slot="trigger" caret>View</afp-button>
  
  <afp-dropdown-item checked>Grid</afp-dropdown-item>
  <afp-dropdown-item checked>Source</afp-dropdown-item>
  <afp-dropdown-item disabled>Canvas</afp-dropdown-item>
  <afp-dropdown-item>Preview</afp-dropdown-item>
  <afp-dropdown-item checked>Fullscreen</afp-dropdown-item>
  <hr/>
  <afp-dropdown-item>Preferences...</afp-dropdown-item>
</afp-dropdown>

<afp-dropdown [style]="'--afp-dropdown-max-height: 20rem'">
  <afp-button [slot]="'trigger'" caret>View</afp-button>
  
  <afp-dropdown-item checked>Grid</afp-dropdown-item>
  <afp-dropdown-item checked>Source</afp-dropdown-item>
  <afp-dropdown-item disabled>Canvas</afp-dropdown-item>
  <afp-dropdown-item>Preview</afp-dropdown-item>
  <afp-dropdown-item checked>Fullscreen</afp-dropdown-item>
  <hr/>
  <afp-dropdown-item>Preferences...</afp-dropdown-item>
</afp-dropdown>

<AfpDropdown style="--afp-dropdown-max-height: 20rem">
  <AfpButton slot="trigger" caret>View</AfpButton>
  
  <AfpDropdownItem checked>Grid</AfpDropdownItem>
  <AfpDropdownItem checked>Source</AfpDropdownItem>
  <AfpDropdownItem disabled>Canvas</AfpDropdownItem>
  <AfpDropdownItem>Preview</AfpDropdownItem>
  <AfpDropdownItem checked>Fullscreen</AfpDropdownItem>
  <hr/>
  <AfpDropdownItem>Preferences...</AfpDropdownItem>
</AfpDropdown>

<AfpDropdown :style="'--afp-dropdown-max-height: 20rem'">
  <AfpButton :slot="'trigger'" caret>View</AfpButton>
  
  <AfpDropdownItem checked>Grid</AfpDropdownItem>
  <AfpDropdownItem checked>Source</AfpDropdownItem>
  <AfpDropdownItem disabled>Canvas</AfpDropdownItem>
  <AfpDropdownItem>Preview</AfpDropdownItem>
  <AfpDropdownItem checked>Fullscreen</AfpDropdownItem>
  <hr/>
  <AfpDropdownItem>Preferences...</AfpDropdownItem>
</AfpDropdown>

Min Width #

You can set a minimum width for the dropdown using the --afp-dropdown-min-width CSS variable.

Project

Collaboration

Invite members 2

Management

Archive

Delete

<afp-dropdown style="--afp-dropdown-min-width: 15rem; --afp-dropdown-max-height: 20rem;">
  <afp-button slot="trigger" caret>Project</afp-button>

  <h3>Collaboration</h3>
  <afp-dropdown-item><afp-icon name="share"></afp-icon>Share</afp-dropdown-item>
  <afp-dropdown-item>
    <afp-icon name="person-plus"></afp-icon>
    Invite members
    <afp-badge slot="details" variant="brand" appearance="filled" shape="pill">2</afp-badge>
  </afp-dropdown-item>
  <hr/>
  <h3>Management</h3>
  <afp-dropdown-item><afp-icon name="archive"></afp-icon>Archive</afp-dropdown-item>
  <afp-dropdown-item><afp-icon name="trash"></afp-icon>Delete</afp-dropdown-item>
</afp-dropdown>

<afp-dropdown [style]="'--afp-dropdown-min-width: 15rem; --afp-dropdown-max-height: 20rem;'">
  <afp-button [slot]="'trigger'" caret>Project</afp-button>

  <h3>Collaboration</h3>
  <afp-dropdown-item><afp-icon [name]="'share'"></afp-icon>Share</afp-dropdown-item>
  <afp-dropdown-item>
    <afp-icon [name]="'person-plus'"></afp-icon>
    Invite members
    <afp-badge [slot]="'details'" [variant]="'brand'" [appearance]="'filled'" [shape]="'pill'">2</afp-badge>
  </afp-dropdown-item>
  <hr/>
  <h3>Management</h3>
  <afp-dropdown-item><afp-icon [name]="'archive'"></afp-icon>Archive</afp-dropdown-item>
  <afp-dropdown-item><afp-icon [name]="'trash'"></afp-icon>Delete</afp-dropdown-item>
</afp-dropdown>

<AfpDropdown style="--afp-dropdown-min-width: 15rem; --afp-dropdown-max-height: 20rem;">
  <AfpButton slot="trigger" caret>Project</AfpButton>

  <h3>Collaboration</h3>
  <AfpDropdownItem><AfpIcon name="share"></AfpIcon>Share</AfpDropdownItem>
  <AfpDropdownItem>
    <AfpIcon name="person-plus"></AfpIcon>
    Invite members
    <AfpBadge slot="details" variant="brand" appearance="filled" shape="pill">2</AfpBadge>
  </AfpDropdownItem>
  <hr/>
  <h3>Management</h3>
  <AfpDropdownItem><AfpIcon name="archive"></AfpIcon>Archive</AfpDropdownItem>
  <AfpDropdownItem><AfpIcon name="trash"></AfpIcon>Delete</AfpDropdownItem>
</AfpDropdown>

<AfpDropdown :style="'--afp-dropdown-min-width: 15rem; --afp-dropdown-max-height: 20rem;'">
  <AfpButton :slot="'trigger'" caret>Project</AfpButton>

  <h3>Collaboration</h3>
  <AfpDropdownItem><AfpIcon :name="'share'"></AfpIcon>Share</AfpDropdownItem>
  <AfpDropdownItem>
    <AfpIcon :name="'person-plus'"></AfpIcon>
    Invite members
    <AfpBadge :slot="'details'" :variant="'brand'" :appearance="'filled'" :shape="'pill'">2</AfpBadge>
  </AfpDropdownItem>
  <hr/>
  <h3>Management</h3>
  <AfpDropdownItem><AfpIcon :name="'archive'"></AfpIcon>Archive</AfpDropdownItem>
  <AfpDropdownItem><AfpIcon :name="'trash'"></AfpIcon>Delete</AfpDropdownItem>
</AfpDropdown>

Notes #

The Dropdown component is built on top of the Popover component and therefore inherits many of its configuration options.
This includes properties like placement, offset, strategy, and duration, which control how and where the dropdown appears, how far it’s positioned from its trigger, the positioning strategy (absolute or fixed), and the transition timing for showing or hiding it.

For a detailed explanation of these options, see the Popover documentation.

Properties

Learn more about properties.

Name Description Reflects

keep

Set to true to keep the dropdown open after selecting an item.

Type boolean

Default false

open

Indicates whether the dropdown is open.

Type boolean

Default false

strategy

Positioning strategy for the dropdown. Either `absolute` or `fixed`.

Type

AfpStrategy

Name	Description
`ABSOLUTE`	Positioning using absolute positioning.
`FIXED`	Positioning using fixed positioning.

AfpStrategy

Default AfpStrategy.ABSOLUTE

offset

Offset configuration for positioning.

Type

AfpOffset

Name	Description
`mainAxis`	type: `number`
`crossAxis`	type: `number`
`alignmentAxis`	type: `number \| null`

AfpOffset

Default { mainAxis: 4, crossAxis: 0, alignmentAxis: 0, }

duration

Animation duration in milliseconds.

Type number

Default 150

placement

The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport. If set to an empty array ([]), it enables auto placement. If containing more than two items, it is automatically restricted to the provided placements. You can also input a space-separated string.

Type

AfpPlacement

Name	Description
`TOP`	Top placement.
`RIGHT`	Right placement.
`BOTTOM`	Bottom placement.
`LEFT`	Left placement.
`TOP_START`	Top-start placement.
`TOP_END`	Top-end placement.
`RIGHT_START`	Right-start placement.
`RIGHT_END`	Right-end placement.
`BOTTOM_START`	Bottom-start placement.
`BOTTOM_END`	Bottom-end placement.
`LEFT_START`	Left-start placement.
`LEFT_END`	Left-end placement.

AfpPlacement

Default [ AfpPlacement.BOTTOM_START, AfpPlacement.BOTTOM_END, AfpPlacement.TOP_START, AfpPlacement.TOP_END, ]

Methods

Learn more about using methods.

Name	Description	Arguments
`show`	Shows the dropdown.	-
`hide`	Hides the dropdown.	-
`toggle`	Toggles the dropdown open state.	-

Events

Learn more about events.

Name	Return	Description
`afp-select`	`string`	Emitted when a dropdown item is selected.
`afp-show`	`void`	Emitted when the dropdown is shown.
`afp-after-show`	`void`	Emitted after the dropdown has been shown.
`afp-hide`	`void`	Emitted when the dropdown is hidden.
`afp-after-hide`	`void`	Emitted after the dropdown has been hidden.

Slots

Learn more about slots.

Name	Description
`default`	The dropdown items (afp-dropdown-item).
`trigger`	The element that opens the dropdown.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The main wrapper element.	`::part(base)`

CSS Custom Properties

Name	Description	Default
`--afp-dropdown-max-height`	The maximum height of the dropdown panel.	`15rem`
`--afp-dropdown-min-width`	The minimum width of the dropdown panel.	`auto`

Dependencies

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

afp-popover

afp-dropdown-item

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/dropdown.js';