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>
Possimus voluptatem et id natus id. Quae at itaque autem deleniti quae et delectus. Aliquam optio minus dolorum voluptatem dolor corrupti 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
Assumenda ea facilis quae velit blanditiis non consectetur. Ab molestiae vitae suscipit debitis. Ut tempore est iure inventore et enim a. Autem autem error ipsa molestiae.

# 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>
Rerum omnis adipisci distinctio earum error corporis. Consequatur saepe dolores non ut eum omnis neque ut. Recusandae maxime ea molestiae alias.
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>
Consequatur voluptas beatae consequatur quo. Aut non repudiandae qui earum eum nam. Officia et sint sunt qui ea. Omnis libero assumenda sit. Nemo qui maxime omnis minima fuga.

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

UI components
Divider
UI components
Icon