Dropdown Blade component

You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.

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 the keyboard

Dropdowns use action-menu semantics by default. You can open the menu with Enter, Space or Arrow Down to focus the first item, or Arrow Up to focus the last item. Arrow Up and Arrow Down move between items and wrap at either end. Disabled items can receive focus but cannot be activated. Escape closes the menu and returns focus to its trigger; Tab closes it and moves to the next focusable control. If your dropdown contains form fields or other content that is not an action menu, set :menu="false" to preserve normal Tab navigation and the content’s own keyboard interactions:

<x-filament::dropdown :menu="false">
    <x-slot name="trigger">
        <x-filament::button>
            Edit notes
        </x-filament::button>
    </x-slot>

    <label for="dropdown-notes">Notes</label>

    <x-filament::input.wrapper>
        <x-filament::input id="dropdown-notes" wire:model="notes" />
    </x-filament::input.wrapper>
</x-filament::dropdown>

Use form components or native buttons and links in these popups, rather than dropdown.list.item, which renders menu-item semantics. 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>

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>

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>

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>

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>

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>

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>

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>

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>

Introduction

Guides

Resources

Tables

Schemas

Forms

Infolists

Actions

Notifications

Widgets

Configuration

Navigation

Users

Styling

Advanced

Testing

Plugins

Components

Deployment

Upgrading

Dropdown Blade component

Introduction

Using the keyboard

Displaying content other than a menu

​Introduction

​Using the keyboard

​Displaying content other than a menu

​Using a dropdown item as an anchor link

​Changing the color of a dropdown item

​Adding an icon to a dropdown item

​Changing the icon color of a dropdown item

​Adding an image to a dropdown item

​Adding a badge to a dropdown item

​Setting the placement of a dropdown

​Setting the width of a dropdown

​Controlling the maximum height of a dropdown

Introduction

Using the keyboard

Displaying content other than a menu

Using a dropdown item as an anchor link

Changing the color of a dropdown item

Adding an icon to a dropdown item

Changing the icon color of a dropdown item

Adding an image to a dropdown item

Adding a badge to a dropdown item

Setting the placement of a dropdown

Setting the width of a dropdown

Controlling the maximum height of a dropdown