Dropdown

# Basics

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

<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Quo voluptatem voluptas doloremque voluptate facere. Ullam aspernatur sit ut totam molestias tenetur tempore quis. Assumenda reprehenderit consequatur maxime harum.

# 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>
Dropdown title
Aperiam neque commodi in qui numquam ut non. Quia quisquam fuga accusamus sit ipsum quos. Eligendi sit consequatur aut. Facilis id recusandae sed totam. Sunt laboriosam architecto expedita et sed.

# 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>
Natus voluptates voluptates provident culpa praesentium eligendi ea. Dolorum vel soluta ab dolorum.
Dropdown footer

# 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>
Deserunt quia repellat sed quaerat. Sint facilis omnis laboriosam voluptate magni ut. Ipsam quo quia qui alias. Ut voluptas consequatur dolores odit.

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

UI components
Divider
UI components
Icon