Dropdown

Contextual popover menus with support for headers, icon items, badges, separators, and danger actions.

Component Syntax

blade

<x-aura::dropdown>
    <x-slot:trigger>
        <x-aura::button>
            Options
        </x-aura::button>
    </x-slot:trigger>

    <x-aura::dropdown.item icon="user">
        Profile
    </x-aura::dropdown.item>
</x-aura::dropdown>

1. Action Menu

blade

<x-aura::dropdown align="right" width="56">

    <x-slot:trigger>

        <x-aura::button variant="secondary" iconTrailing="chevron-down">
            Actions
        </x-aura::button>

    </x-slot:trigger>

    <x-aura::dropdown.header>
        Manage
    </x-aura::dropdown.header>

    <x-aura::dropdown.item href="#" icon="pencil">
        Edit
    </x-aura::dropdown.item>

    <x-aura::dropdown.item href="#" icon="copy" badge="⌘C">
        Duplicate
    </x-aura::dropdown.item>

    <x-aura::dropdown.separator />

    <x-aura::dropdown.item href="#" icon="trash-2" variant="danger">
        Delete
    </x-aura::dropdown.item>

</x-aura::dropdown>

2. Item Sizes

blade

<!-- Extra Small Item Size -->
<x-aura::dropdown.item href="#" icon="pencil" size="xs">
    Edit
</x-aura::dropdown.item>

<!-- Default Small Item Size -->
<x-aura::dropdown.item href="#" icon="pencil" size="sm">
    Edit
</x-aura::dropdown.item>

<!-- Medium Item Size -->
<x-aura::dropdown.item href="#" icon="pencil" size="md">
    Edit
</x-aura::dropdown.item>

3. Dropdown Checkbox Items

blade

<x-aura::dropdown align="right" width="56">

    <x-slot:trigger>

        <x-aura::button variant="secondary" iconTrailing="chevron-down">
            View
        </x-aura::button>

    </x-slot:trigger>

    <x-aura::dropdown.header>
        Display Columns
    </x-aura::dropdown.header>

    <x-aura::dropdown.checkbox name="col_status" label="Status" :checked="true" />

    <x-aura::dropdown.checkbox name="col_priority" label="Priority" :checked="true" />

    <x-aura::dropdown.checkbox name="col_date" label="Due Date" :checked="false" />

    <x-aura::dropdown.separator />

    <x-aura::dropdown.checkbox name="col_archived" label="Show Archived" :checked="false" />

</x-aura::dropdown>

Dropdown Props

Available properties and configurations for the dropdown menu component.

Prop	Default	Available Values
align	right	left right
width	56	44 48 56 64 72

Dropdown Item Props

Available properties and configurations for individual dropdown item components.

Prop	Default	Available Values
size	sm	xs sm md
variant	default	default danger
icon	null	string
badge	null	string
href	null	string
disabled	false	true false

Dropdown Checkbox Props

Available properties and configurations for toggleable dropdown checkbox components.

Prop	Default	Available Values
size	sm	xs sm md lg
label	null	string
checked	false	true false
disabled	false	true false
name	null	string
id	null	string

Aura Wire

Component Library

Dropdown

Component Syntax

1. Action Menu

2. Item Sizes

3. Dropdown Checkbox Items

Dropdown Props

Dropdown Item Props

Dropdown Checkbox Props

Link

Field

Aura Wire