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
Assumenda voluptas molestiae ab exercitationem voluptas maxime praesentium. Iusto quos perferendis odit. Incidunt ea dolores fugiat saepe sunt quisquam.

# 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())
Illo modi voluptatem officiis. Sed nihil totam sit aspernatur ut qui cupiditate. Quia sapiente consequatur dolores adipisci molestias.

# 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')
Quisquam ut aliquam voluptatibus deleniti cum sint. Deserunt sit voluptatibus minima magni. Recusandae veritatis repudiandae natus incidunt necessitatibus.

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

Components
Badge
Components
Card