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>
Repellendus reiciendis temporibus consectetur repellendus. Veritatis consequatur expedita neque quibusdam doloribus consectetur. Quos provident aut fuga sit.

# 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
Similique odit voluptatem ipsam voluptas explicabo corrupti qui. Ipsa quisquam est voluptatem dolorum nostrum. Dolor dolorum ducimus repellendus omnis.

# 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>
Est sed labore temporibus voluptate laudantium eligendi. Impedit animi tempore labore dolores illo animi. Optio quia labore nihil asperiores. Quo animi nihil sed deleniti distinctio est eius.
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>
Et quasi et sint ullam molestiae voluptatem sapiente. Iste voluptates exercitationem exercitationem. Nemo necessitatibus assumenda maiores at sed laborum perferendis. Sed quia alias cum nobis.

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

UI components
Divider
UI components
Icon