Dropdown Blade component

#Introduction

The dropdown component allows you to render a dropdown menu with a button that triggers it:

<x-filament::dropdown>
    <x-slot name="trigger">
        <x-filament::button>
            More actions
        </x-filament::button>
    </x-slot>
    
    <x-filament::dropdown.list>
        <x-filament::dropdown.list.item wire:click="openViewModal">
            View
        </x-filament::dropdown.list.item>
        
        <x-filament::dropdown.list.item wire:click="openEditModal">
            Edit
        </x-filament::dropdown.list.item>
        
        <x-filament::dropdown.list.item wire:click="openDeleteModal">
            Delete
        </x-filament::dropdown.list.item>
    </x-filament::dropdown.list>
</x-filament::dropdown>

#Using a dropdown item as an anchor link

By default, a dropdown item’s underlying HTML tag is <button>. You can change it to be an <a> tag by using the tag attribute:

<x-filament::dropdown.list.item
    href="https://filamentphp.com"
    tag="a"
>
    Filament
</x-filament::dropdown.list.item>

#Changing the color of a dropdown item

By default, the color of a dropdown item is “gray”. You can change it to be danger, info, primary, success or warning by using the color attribute:

<x-filament::dropdown.list.item color="danger">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="info">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="primary">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="success">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="warning">
    Edit
</x-filament::dropdown.list.item>

#Adding an icon to a dropdown item

You can add an icon to a dropdown item by using the icon attribute:

<x-filament::dropdown.list.item icon="heroicon-m-pencil">
    Edit
</x-filament::dropdown.list.item>

#Changing the icon color of a dropdown item

By default, the icon color uses the same color as the item itself. You can override it to be danger, info, primary, success or warning by using the icon-color attribute:

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="danger">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="info">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="primary">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="success">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="warning">
    Edit
</x-filament::dropdown.list.item>

#Adding an image to a dropdown item

You can add a circular image to a dropdown item by using the image attribute:

<x-filament::dropdown.list.item image="https://filamentphp.com/dan.jpg">
    Dan Harrin
</x-filament::dropdown.list.item>

#Adding a badge to a dropdown item

You can render a badge on top of a dropdown item by using the badge slot:

<x-filament::dropdown.list.item>
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::dropdown.list.item>

You can change the color of the badge using the badge-color attribute:

<x-filament::dropdown.list.item badge-color="danger">
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::dropdown.list.item>

#Setting the placement of a dropdown

The dropdown may be positioned relative to the trigger button by using the placement attribute:

<x-filament::dropdown placement="top-start">
    {{-- Dropdown items --}}
</x-filament::dropdown>

#Setting the width of a dropdown

The dropdown may be set to a width by using the width attribute. Options correspond to Tailwind’s max-width scale. The options are xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl and 7xl:

<x-filament::dropdown width="xs">
    {{-- Dropdown items --}}
</x-filament::dropdown>

#Controlling the maximum height of a dropdown

The dropdown content can have a maximum height using the max-height attribute, so that it scrolls. You can pass a CSS length:

<x-filament::dropdown max-height="400px">
    {{-- Dropdown items --}}
</x-filament::dropdown>

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion