UI components

Dropdown

Basics

Using the moonshine::dropdown component you can create drop-down blocks.

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

Heading

{{ fake()->text() }}
Click me 
<x-moonshine::dropdown title="Dropdown title">
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
{{ fake()->text() }}
Click me Dropdown footer 
<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
{{ fake()->text() }}
Click me 
<x-moonshine::dropdown placement="left">
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>

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