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>
Sunt optio quis atque iure et. Facere sed ea qui maxime reprehenderit non. Aut aut dignissimos dolores optio. Voluptatibus aut eum fugiat omnis culpa non.

# 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
Et qui nesciunt impedit voluptatem. Odit non sed cupiditate. Eum dolorem natus accusantium ipsum error eligendi sed. Maiores voluptates quae nam unde.

# 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>
Doloribus eos distinctio quia explicabo et. Ratione beatae eveniet aut exercitationem architecto facere non. Sequi doloribus accusantium vel rem distinctio. Rerum officia maxime aut commodi.
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>
Ratione nihil incidunt sit et. Blanditiis perferendis ut dicta quia. Consequuntur rerum eveniet magni magnam. Voluptatem laboriosam sunt fugit cupiditate.

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

UI components
Divider
UI components
Icon