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>
Ut quae dignissimos esse consequuntur veniam et iusto culpa. Ut sed molestias mollitia est est. Molestiae nulla qui aut unde earum.

# 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
Sunt dolorem et dicta ipsa. Et adipisci maiores facere minima repellendus voluptas neque. Tempora numquam eaque asperiores earum qui voluptatem. Ducimus quo error dolores ex.

# 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>
Sed numquam sit molestiae optio. Perspiciatis quasi voluptatem corporis adipisci aliquid. Perspiciatis explicabo culpa explicabo harum hic debitis sunt. Est nihil quia quia itaque sint aut eaque.
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>
Assumenda at voluptatum unde amet id nesciunt cupiditate. Consequatur autem odio enim facere ut fuga eius. Debitis et rerum est non repellat praesentium.

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

UI components
Divider
UI components
Icon