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'
)
  • $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',
)
Title

# Toggler

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

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'))
Dropdown
Non dicta libero qui nobis fuga. Sunt molestiae molestias cumque qui corporis. Saepe consequatur vel debitis aspernatur laudantium. Sunt ducimus dolor repudiandae.

# Items

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

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'),
    ])

# Search item

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

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()
Placeholder

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

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')

# Content

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

content(Closure|View|string $content)
use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
)
    ->content(fake()->text())
Voluptatem commodi tempore mollitia illo odio ad. Vel id molestiae iste ut velit facilis.

# Placement

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

placement(string $placement)

Available locations:

bottom top left right 

use MoonShine\Components\Dropdown;
 
Dropdown::make(
    toggler: 'Click me',
    content: fake()->text(),
)
    ->placement('right')
Iste ut inventore laboriosam ullam dolores dolor. Placeat sed accusantium ut id aspernatur possimus omnis. Quia dignissimos ut ratione id quo nobis excepturi. Nulla dolores vero aspernatur aut qui.

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

Components
Badge
Components
Card