Components

Dropdown

Basics

Using the Dropdown component, you can create dropdown blocks.

make(
    ?string $title = null,
    Closure|string $toggler = '',
    Closure|Renderable|string $content = '',
    Closure|array $items = [],
    bool $searchable = false,
    Closure|string $searchPlaceholder = '',
    string $placement = 'bottom-start',
    Closure|string $footer = '',
)
  • $title - the title for the list inside the Dropdown
  • $toggler - the appearance of the button to display
  • $content - the content of the Dropdown
  • $items - items for forming the list in the form of ul li
  • $searchable - search by content
  • $searchPlaceholder - placeholder for search
  • $placement - location
  • $footer - footer for the list inside the Dropdown
use MoonShine\UI\Components\Dropdown;
 
Dropdown::make(
    'Dropdown',
    'Toggler',
    'Content',
    ['Item 1', 'Item 1']
)
<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>

Heading

<x-moonshine::dropdown title="Dropdown title">
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
    <x-slot:footer>Dropdown footer</x-slot:footer>
</x-moonshine::dropdown>

Location

Available locations:

  • bottom,
  • top,
  • left,
  • right.
<x-moonshine::dropdown placement="left">
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>

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