Dropdown

Displays a menu to the user—such as a set of actions or functions—triggered by a button, with full keyboard navigation support.

Overview#

The dropdown component has a <template #trigger> slot to contain the button that will trigger the dropdown.

<ui-dropdown>
    <template #trigger>
        <ui-button text="Do a Action" icon-append="ui/chevron-vertical" class="[&_svg]:size-2" />
    </template>
    <ui-dropdown-menu>
        <ui-dropdown-item text="Bake a food" />
        <ui-dropdown-item text="Write that book" />
        <ui-dropdown-item text="Eat this meal" />
        <ui-dropdown-item text="Lie about larceny" />
        <ui-dropdown-item text="Save some bird" />
    </ui-dropdown-menu>
</ui-dropdown>

Icons#

<ui-dropdown>
    <template #trigger>
        <ui-button text="Go To..." icon-append="ui/chevron-vertical" class="[&_svg]:size-2" />
    </template>
    <ui-dropdown-menu>
        <ui-dropdown-item text="Assets" icon="assets" />
        <ui-dropdown-item text="Collections" icon="collections" />
        <ui-dropdown-item text="Globals" icon="globals" />
        <ui-dropdown-item text="Navigation" icon="navigation" />
        <ui-dropdown-separator />
        <ui-dropdown-item text="Taxonomies" icon="taxonomies" />
    </ui-dropdown-menu>
</ui-dropdown>

Headers and footers#

Headers and footers can be added to the dropdown by using the <ui-dropdown-header> and <ui-dropdown-footer> components.

<ui-dropdown>
    <template #trigger>
        <ui-button text="My Account" icon-append="ui/chevron-vertical" class="[&_svg]:size-2" />
    </template>
    <ui-dropdown-header text="My Account" icon="avatar" />
    <ui-dropdown-menu>
        <ui-dropdown-item text="Photos" icon="assets" />
        <ui-dropdown-item text="Email" icon="mail" />
        <ui-dropdown-item text="Sales" icon="taxonomies" />
    </ui-dropdown-menu>
    <ui-dropdown-footer text="Logout" icon="arrow-right" />
</ui-dropdown>

Destructive variant#

Items can have a destructive variant to indicate the action it performs will delete, destroy, or otherwise remove something from the site.

<ui-dropdown>
    <template #trigger>
        <ui-button text="Show List of Actions" />
    </template>
    <ui-dropdown-menu>
        <ui-dropdown-item text="Do a Nothing" icon="sun" />
        <ui-dropdown-item text="Delete a Something" variant="destructive" icon="trash" />
    </ui-dropdown-menu>
</ui-dropdown>

Disabled items#

Items can be disabled by using the disabled prop.

<ui-dropdown>
    <template #trigger>
        <ui-button text="Go To..." icon-append="ui/chevron-vertical" class="[&_svg]:size-2" />
    </template>
    <ui-dropdown-menu>
        <ui-dropdown-item text="Collections" icon="collections" />
        <ui-dropdown-item text="Taxonomies" icon="taxonomies" disabled />
        <ui-dropdown-item text="Globals" icon="globals" />
    </ui-dropdown-menu>
</ui-dropdown>

Additional Props#

You can pass additional props to the dropdown to customize it.

Prop	Type	Options
align	string	`start`/`center`/`end`
side	string	`top`/ `bottom`/ `left`/ `right`
offset	integer	The distance in pixels from the trigger.