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>
Nisi vitae ut odio sit non in corporis. Odio sint adipisci qui deleniti porro autem. Illo vero quia minima rerum eum.

# 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
Ipsa nesciunt sint voluptate ut repellat labore veritatis. Dolorum similique vitae sunt corporis sapiente. In voluptas autem qui eum nisi in magnam.

# 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>
Ullam inventore quod nihil et alias autem est voluptatem. Et eum consequatur itaque. Et veritatis rerum enim maxime beatae. Et rerum cumque nobis minima impedit nihil exercitationem.
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>
Autem dolor natus necessitatibus aut voluptas nesciunt. Odio minus dolorem laborum quam autem perspiciatis. Velit mollitia ut quia iure est at ullam.

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

UI components
Divider
UI components
Icon