Dropdown

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

# Basics

Using the moonshine::dropdown component, you can create dropdown blocks 

<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Voluptates ea aut occaecati est praesentium voluptas. Veniam labore fugiat nulla ipsam sint quos qui. Placeat id eligendi adipisci.

# Title 

<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
Deleniti dignissimos occaecati hic. Quo non ut animi facere et consequatur. Autem eius minima natus consequuntur. Ipsa quia nostrum minus aliquam dolor reprehenderit.

# 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>
Est accusamus molestias consequatur reprehenderit dolore molestiae reiciendis. Vel laboriosam sed aut mollitia quam quia. Impedit dolores nam sequi laboriosam consectetur ipsum fuga harum.
Dropdown footer

# Placement

Available placement:

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>
Veritatis numquam voluptatem voluptatem dolores repellendus debitis. Et consequatur eos minus tempora. Ducimus voluptas odio et et perferendis.

For additional location options, see the official documentation tippy.js

UI components
Divider
UI components
Icon