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>
Sint error laudantium debitis pariatur voluptatum. Tempore aut voluptate labore suscipit ut qui. Quam animi laborum praesentium et placeat quibusdam.

# 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
Sed ab et velit unde. Nostrum similique provident neque. Rem eligendi temporibus qui et ex voluptatem nobis. Deserunt ea et animi maxime tempore commodi distinctio.

# 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>
Velit labore maiores eius occaecati et amet voluptatem. Aut commodi aliquam tenetur dolor commodi cumque.
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>
Quibusdam alias omnis eos cumque eos voluptas aspernatur. Velit et aut quis et quia est ut. Est itaque voluptas eius tenetur eligendi consequatur libero.

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

UI components
Divider
UI components
Icon