Boson
Packagist GitHub

Dropdown

A dropdown menu for actions and navigation. Wrap a trigger element in dropdown.trigger, place items inside dropdown.menu, and use dropdown.item for each action.

Basic usage

<x-boson::dropdown>
    <x-boson::dropdown.trigger>
        <x-boson::button>Options</x-boson::button>
    </x-boson::dropdown.trigger>
    <x-boson::dropdown.menu>
        <x-boson::dropdown.item icon="pencil">Edit</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="document-duplicate">Duplicate</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="archive-box">Archive</x-boson::dropdown.item>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

With links

<x-boson::dropdown>
    <x-boson::dropdown.trigger>
        <x-boson::button>Navigate</x-boson::button>
    </x-boson::dropdown.trigger>
    <x-boson::dropdown.menu>
        <x-boson::dropdown.item icon="home" href="/home">Home</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="user" href="/profile">Profile</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="cog-6-tooth" href="/settings">Settings</x-boson::dropdown.item>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

With separator

<x-boson::dropdown>
    <x-boson::dropdown.trigger>
        <x-boson::button>Actions</x-boson::button>
    </x-boson::dropdown.trigger>
    <x-boson::dropdown.menu>
        <x-boson::dropdown.item icon="pencil">Edit</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="document-duplicate">Duplicate</x-boson::dropdown.item>
        <x-boson::dropdown.separator />
        <x-boson::dropdown.item icon="trash" variant="danger">Delete</x-boson::dropdown.item>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

With groups

<x-boson::dropdown>
    <x-boson::dropdown.trigger>
        <x-boson::button>Account</x-boson::button>
    </x-boson::dropdown.trigger>
    <x-boson::dropdown.menu>
        <x-boson::dropdown.group heading="My Account">
            <x-boson::dropdown.item icon="user">Profile</x-boson::dropdown.item>
            <x-boson::dropdown.item icon="cog-6-tooth">Settings</x-boson::dropdown.item>
        </x-boson::dropdown.group>
        <x-boson::dropdown.separator />
        <x-boson::dropdown.group heading="Team">
            <x-boson::dropdown.item icon="user-group">Members</x-boson::dropdown.item>
            <x-boson::dropdown.item icon="plus">Invite</x-boson::dropdown.item>
        </x-boson::dropdown.group>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

With trailing icon

<x-boson::dropdown>
    <x-boson::dropdown.trigger>
        <x-boson::button>More</x-boson::button>
    </x-boson::dropdown.trigger>
    <x-boson::dropdown.menu>
        <x-boson::dropdown.item icon="pencil" icon:trailing="command-line">Edit</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="document-duplicate" icon:trailing="command-line">Duplicate</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="arrow-top-right-on-square" icon:trailing="arrow-right">Open in new tab</x-boson::dropdown.item>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

Danger variant

<x-boson::dropdown>
    <x-boson::dropdown.trigger>
        <x-boson::button>Manage</x-boson::button>
    </x-boson::dropdown.trigger>
    <x-boson::dropdown.menu>
        <x-boson::dropdown.item icon="pencil">Edit</x-boson::dropdown.item>
        <x-boson::dropdown.item icon="archive-box">Archive</x-boson::dropdown.item>
        <x-boson::dropdown.separator />
        <x-boson::dropdown.item icon="trash" variant="danger">Delete project</x-boson::dropdown.item>
    </x-boson::dropdown.menu>
</x-boson::dropdown>

Placement

<x-boson::dropdown placement="bottom-start">
    ...
</x-boson::dropdown>

<x-boson::dropdown placement="bottom-end">
    ...
</x-boson::dropdown>

<x-boson::dropdown placement="top-start">
    ...
</x-boson::dropdown>

Props

dropdown

Prop Type Default Description
placement string bottom-start Menu position relative to trigger (bottom-start, bottom-end, top-start, top-end, right-start, left-start)

dropdown.item

Prop Type Default Description
icon string null Leading icon name
icon:trailing string null Trailing icon name
href string null Render the item as a link
variant string null Visual variant (danger)
as string button HTML element to render as

dropdown.group

Prop Type Default Description
heading string null Label displayed above the group