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>
Quis consequuntur officiis a ut iusto sapiente repellat. Est quo esse illo fugit earum inventore omnis quibusdam. Enim porro eaque amet quaerat consequatur pariatur totam.

# 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
Quo laborum vitae ea excepturi sit iure. Suscipit quo corrupti error sunt. Deleniti accusamus tempore itaque sapiente rerum reiciendis.

# 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>
Corporis aut iste ipsa quos. Aperiam ab voluptas et. Excepturi libero magnam quisquam consequuntur nostrum debitis ipsum. Tempora necessitatibus quibusdam quo nemo.
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>
Voluptatem molestiae officia quisquam dolore. Ad voluptatem qui excepturi dignissimos. Ut et cumque sed sunt dolorem.

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

UI components
Divider
UI components
Icon