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 = '',
)
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']
)
use MoonShine\UI\Components\Dropdown;
 
Dropdown::make(
    'Dropdown',
    'Toggler',
    'Content',
    ['Item 1', 'Item 1']
)
<x-moonshine::dropdown>
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
<x-moonshine::dropdown>
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>

Heading

<x-moonshine::dropdown title="Dropdown title">
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
<x-moonshine::dropdown title="Dropdown title">
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
<x-moonshine::dropdown>
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
    <x-slot:footer>Dropdown footer</x-slot:footer>
</x-moonshine::dropdown>
<x-moonshine::dropdown>
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
    <x-slot:footer>Dropdown footer</x-slot:footer>
</x-moonshine::dropdown>

Location

<x-moonshine::dropdown placement="left">
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
<x-moonshine::dropdown placement="left">
    <div class="m-4">
        Content
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>

For an up-to-date list of available locations, see popper.js documentation.