Dropdown

A composable dropdown component that can handle both simple navigation menus as well as complex action menus with checkboxes, radios, and submenus.

<x-dropdown>
    <x-button icon-trailing="o-chevron-down">Options</x-button>
 
    <x-menu>
        <x-menu.item icon="s-plus">New post</x-menu.item>
 
        <x-menu.submenu heading="Sub menu" icon="s-adjustments-horizontal">
            <x-menu.item icon="s-plus">Action 1</x-menu.item>
            <x-menu.item>Action 2</x-menu.item>
        </x-menu.submenu>
 
        <x-menu.item variant="danger" icon="s-trash">Delete</x-menu.item>
    </x-menu>
</x-dropdown>

Navigation menus

Display a simple set of links in a dropdown menu.

Use the


    navmenu

component for a simple collections of links. Otherwise, use the


    menu

component for action menus that require keyboard navigation, submenus, etc.

<x-dropdown position="bottom-end">
    <x-profile avatar="https://ui-avatars.com/api/?name=Joe+Nikolaus&color=27272a&background=00000000&format=svg"
        name="Joe Nikolaus" />
 
    <x-navmenu>
        <x-navmenu.item href="#" icon="s-user">Account</x-navmenu.item>
        <x-navmenu.item href="#" icon="s-building-storefront">Profile</x-navmenu.item>
        <x-navmenu.item href="#" icon="s-credit-card">Billing</x-navmenu.item>
        <x-navmenu.item href="#" icon="s-arrow-right-start-on-rectangle">Logout</x-navmenu.item>
        <x-navmenu.item href="#" icon="s-trash" variant="danger">Delete</x-navmenu.item>
    </x-navmenu>
</x-dropdown>

Positioning

Customize the position of the dropdown menu via


    position

props, the default value is


    bottom-start

You can first pass the base position:

top , top-start , top-end .
bottom , bottom-start , bottom-end .
left , left-start , left-end .
right , right-start , right-end .

<x-dropdown position="top-start">
<x-dropdown position="bottom-end">
<x-dropdown position="left-start">
<x-dropdown position="right-end">

Offset

Customize the offset of the dropdown menu via


    offset

props. These properties accept values in pixels, the default value is

<x-dropdown offset="6">
<x-dropdown offset="12">

Keyboard hints

Add keyboard shortcut hints to menu items to teach users how to navigate your app faster.

<x-dropdown>
    <x-button icon-trailing="s-chevron-down">Options</x-button>
 
    <x-menu>
        <x-menu.item icon="s-pencil-square" kbd="Ctrl+S">Save</x-menu.item>
        <x-menu.item icon="s-document-duplicate" kbd="Ctrl+D">Duplicate</x-menu.item>
        <x-menu.item icon="s-trash" variant="danger">Delete</x-menu.item>
    </x-menu>
</x-dropdown>

Groups

Visually group related menu items with a separator line.

<x-dropdown>
    <x-button icon-trailing="o-chevron-down">Options</x-button>
 
    <x-menu>
        <x-menu.item>View</x-menu.item>
        <x-menu.item>Transfer</x-menu.item>
 
        <x-menu.separator />
 
        <x-menu.item>Publish</x-menu.item>
        <x-menu.item>Share</x-menu.item>
 
        <x-menu.separator />
 
        <x-menu.item variant="danger">Delete</x-menu.item>
    </x-menu>
</x-dropdown>

Groups with headings

Group options under headings to make them more discoverable.

<x-dropdown>
    <x-button icon-trailing="o-chevron-down">Options</x-button>
 
    <x-menu>
        <x-menu.group heading="Account">
            <x-menu.item>Profile</x-menu.item>
            <x-menu.item>Permissions</x-menu.item>
        </x-menu.group>
 
        <x-menu.group heading="Billing">
            <x-menu.item>Transactions</x-menu.item>
            <x-menu.item>Payouts</x-menu.item>
            <x-menu.item>Refunds</x-menu.item>
        </x-menu.group>
 
        <x-menu.item>Logout</x-menu.item>
    </x-menu>
</x-dropdown>