> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Dropdown Blade component

> [!WARNING]
>
> 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](https://filament-34a8cf01.mintlify.site/5.x/components/dropdown.md).

## Introduction

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

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![A dropdown menu with action items](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/simple.jpg)

## 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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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:

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![Dropdown items in different colors](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/colors.jpg)

## Adding an icon to a dropdown item

You can add an [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) to a dropdown item by using the `icon` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::dropdown.list.item icon="heroicon-m-pencil">
    Edit
</x-filament::dropdown.list.item>
```

Loading preview

![Dropdown items with icons](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/icons.jpg)

### Changing the icon color of a dropdown item

By default, the icon color uses the [same color as the item itself](#changing-the-color-of-a-dropdown-item). You can override it to be `danger`, `info`, `primary`, `success` or `warning` by using the `icon-color` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

Loading preview

![Dropdown items with different icon colors](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/icon-colors.jpg)

## Adding an image to a dropdown item

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

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::dropdown.list.item image="https://filamentphp.com/dan.jpg">
    Dan Harrin
</x-filament::dropdown.list.item>
```

Loading preview

![Dropdown items with images](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/image.jpg)

## Adding a badge to a dropdown item

You can render a [badge](https://filament-34a8cf01.mintlify.site/4.x/components/badge.md) on top of a dropdown item by using the `badge` slot:

```blade theme={"theme":"gruvbox-dark-hard"}
<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](https://filament-34a8cf01.mintlify.site/4.x/components/badge.md#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::dropdown.list.item badge-color="danger">
    Mark notifications as read

    <x-slot name="badge">
        3
    </x-slot>
</x-filament::dropdown.list.item>
```

Loading preview

![Dropdown items with badges](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/badge.jpg)

## Setting the placement of a dropdown

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

```blade theme={"theme":"gruvbox-dark-hard"}
<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](https://tailwindcss.com/docs/max-width). The options are `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl` and `7xl`:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::dropdown width="xs">
    {{-- Dropdown items --}}
</x-filament::dropdown>
```

Loading preview

![A dropdown with a custom width](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/width.jpg)

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/length):

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::dropdown max-height="400px">
    {{-- Dropdown items --}}
</x-filament::dropdown>
```

Loading preview

![A dropdown with a maximum height](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/dropdown/max-height.jpg)

## Displaying content other than a menu

If your dropdown contains form fields or other content that is not an action menu, set `:menu="false"` to preserve the content's native keyboard interactions:

```blade theme={"theme":"gruvbox-dark-hard"}
<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.

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/03-dropdown.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.