Dropdown - Laravel Blade

Get started with the dropdown component to show a list of menu items when clicking on a trigger element based on multiple layouts, styles, and placements.

Default Dropdown

Blade code

<x-fwb.dropdown label="Dropdown button" id="default-dropdown">
    <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Sign out</x-fwb.dropdown.item>
</x-fwb.dropdown>

Dropdown Hover

Blade code

<x-fwb.dropdown label="Dropdown hover" id="hover-dropdown" triggerType="hover">
    <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Sign out</x-fwb.dropdown.item>
</x-fwb.dropdown>

Dropdown with Divider

Blade code

<x-fwb.dropdown label="Dropdown button" id="divider-dropdown">
    <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item :divider="true" href="#">Separated link</x-fwb.dropdown.item>
</x-fwb.dropdown>

Dropdown with Header

Blade code

<x-fwb.dropdown label="Dropdown button" id="header-dropdown">
    <x-slot:header>
        <div class="font-medium truncate">Bonnie Green</div>
        <div class="truncate">bonnie@flowbite.com</div>
    </x-slot:header>
    <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item :divider="true" href="#">Sign out</x-fwb.dropdown.item>
</x-fwb.dropdown>

Dropdown with Icons

Blade code

<x-fwb.dropdown label="Dropdown button" id="icon-dropdown">
    <x-fwb.dropdown.item href="#" fwb-icon="o-grid">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#" fwb-icon="o-users">Team</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#" fwb-icon="s-user-circle">Profile</x-fwb.dropdown.item>
</x-fwb.dropdown>

Dropdown with Footer

Blade code

<x-fwb.dropdown label="Dropdown button" id="footer-dropdown">
    <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    <x-slot:footer>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
    </x-slot:footer>
</x-fwb.dropdown>

Placement

Blade code

<div class="flex flex-wrap gap-4">
    <x-fwb.dropdown label="Dropdown top" id="top-dropdown" placement="top">
        <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    </x-fwb.dropdown>

    <x-fwb.dropdown label="Dropdown right" id="right-dropdown" placement="right">
        <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    </x-fwb.dropdown>

    <x-fwb.dropdown label="Dropdown bottom" id="bottom-dropdown" placement="bottom">
        <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    </x-fwb.dropdown>

    <x-fwb.dropdown label="Dropdown left" id="left-dropdown" placement="left">
        <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
        <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
    </x-fwb.dropdown>
</div>

Inline Dropdown

Blade code

<x-fwb.dropdown label="Options" id="inline-dropdown" :inline="true">
    <x-fwb.dropdown.item href="#">Dashboard</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Settings</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Earnings</x-fwb.dropdown.item>
</x-fwb.dropdown>

Custom Trigger (Menu Icon)

Blade code

<x-fwb.dropdown id="custom-trigger-dropdown">
    <x-slot:trigger>
        <button type="button" class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
            <x-fwb-o-dots-vertical class="w-5 h-5" />
        </button>
    </x-slot:trigger>
    <x-fwb.dropdown.item href="#">Edit</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Remove</x-fwb.dropdown.item>
    <x-fwb.dropdown.item href="#">Report</x-fwb.dropdown.item>
</x-fwb.dropdown>

Component Properties

Dropdown x-fwb.dropdown

Prop Type Default Description
id string auto Unique identifier for the dropdown. Auto-generated if not provided.
label string Dropdown Text label for the default trigger button.
color string blue Color theme of the default trigger button.
size string md Size of the default trigger button.
placement string bottom Placement of the dropdown menu. Options: top, right, bottom, left.
inline bool false Use a minimal inline trigger button style instead of the full button.
triggerType string click How the dropdown is triggered. Options: click, hover.
trigger slot - Named slot for a custom trigger element instead of the default button.
header slot - Named slot for a header section above the menu items (e.g., user info).
footer slot - Named slot for a footer section below the menu items.

Dropdown Item x-fwb.dropdown.item

Prop Type Default Description
href string|null null URL for the item. Renders as an anchor tag when set, otherwise as a button.
fwb-icon string|null null Shorthand icon name from flowbite-blade-icons (e.g. o-grid). Renders with default w-4 h-4 me-2 text-body-subtle classes.
icon slot — Named slot for full icon control. Takes priority over fwb-icon prop.
divider bool false Show a divider line above this item.