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>
Sint quia ratione id illum ad qui. Sapiente ex et voluptatum dolor. Pariatur enim hic voluptatem dolor fugiat sit perspiciatis. Ut id odio qui voluptatem est id et deleniti.

# 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
Eum magni deleniti et nisi repudiandae. Aut vitae dolor suscipit omnis. Aut sunt qui totam sit mollitia. Quam exercitationem nihil ratione laborum. At possimus quos ut qui sit cum.

# 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>
Fugit expedita itaque ut voluptatum doloremque consequatur. Iusto doloremque culpa sint quidem quia impedit ex. Consectetur aut dolorum recusandae placeat.
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>
Omnis debitis et vitae quis sit. Eius sequi minus porro possimus sint dignissimos. Delectus sed voluptas dicta quis accusantium eum voluptatem. Deserunt voluptas quia dolore et cum neque.

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

UI components
Divider
UI components
Icon