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>
Quam id temporibus aut consectetur dolores sint. Totam ea qui quia qui tempora temporibus ducimus. Harum inventore consequatur ut rerum.

# 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
Dolores sapiente consequatur qui ab. Odit aut culpa ipsum aut dicta. Dolorem voluptatibus iusto ipsum omnis aspernatur distinctio. Aut et et et aperiam cumque vero. Quisquam consequatur et vel.

# 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>
Consequatur ab accusantium quisquam distinctio et vitae voluptas quos. Consectetur similique inventore sint culpa qui necessitatibus dolorem.
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>
Error quam qui vel corrupti. Cupiditate soluta nihil sit autem qui. Consequatur eveniet impedit vel accusantium dolores.

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

UI components
Divider
UI components
Icon