Components

Dropdown Component

Make

The Dropdown component allows you to create drop-down blocks.

You can create a Dropdown using the static make() method class Dropdown.

make(
    ?string $title = null,
    Closure|string $toggler = '',
    Closure|View|string $content = '',
    bool $isSearchable = false,
    Closure|array $items = [],
    string $placement = 'bottom-start'
)
make(
    ?string $title = null,
    Closure|string $toggler = '',
    Closure|View|string $content = '',
    bool $isSearchable = false,
    Closure|array $items = [],
    string $placement = 'bottom-start'
)
  • $title - title of the dropdown,
  • $toggler - switch,
  • $content - content
  • $isSearchable - search by elements
  • $items - block elements,
  • $placement - location of the dropdown.
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    title: 'Title',
    toggler: 'Click me',
    items: [
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ],
    placement: 'top',
)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    title: 'Title',
    toggler: 'Click me',
    items: [
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ],
    placement: 'top',
)

Toggler

The toggler() method allows you to specify an element that, when clicked, will open Dropdown.

toggler(Closure|string $toggler)
toggler(Closure|string $toggler)
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    title: 'Dropdown',
    content: fn() => fake()->text()
)
    ->toggler(fn() => ActionButton::make('Click me'))
use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    title: 'Dropdown',
    content: fn() => fake()->text()
)
    ->toggler(fn() => ActionButton::make('Click me'))

Items

The items() method allows you to add items to the dropdown list.

items(Closure|array $items)
items(Closure|array $items)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])

Search item

The searchable() method allows you to add a search for elements in the dropdown.

searchable(Closure|bool|null $condition = null)
searchable(Closure|bool|null $condition = null)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
    ->searchable()
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
    ->searchable()

Placeholder

The searchPlaceholder() method allows you to change the placeholder in the search field.

searchPlaceholder(Closure|string $placeholder)
searchPlaceholder(Closure|string $placeholder)
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
    ->searchable()
    ->searchPlaceholder('Search item')
use MoonShine\Components\Dropdown;
use MoonShine\Components\Link;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->items([
        Link::make('#', 'Link 1'),
        Link::make('#', 'Link 2'),
        Link::make('#', 'Link 3'),
    ])
    ->searchable()
    ->searchPlaceholder('Search item')

Content

The content() method allows you to display arbitrary content in the revealing block.

content(Closure|View|string $content)
content(Closure|View|string $content)
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->content(fake()->text())
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->content(fake()->text())

Placement

The placement() method allows you to change the location of the dropdown.

placement(string $placement)
placement(string $placement)

Available locations:

  • bottom
  • top
  • left
  • right
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
    content: fake()->text(),
)
    ->placement('right')
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
    content: fake()->text(),
)
    ->placement('right')

Additional location options can be found in the official documentation tippy.js