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>
Excepturi placeat voluptates omnis ad. Eos dolor cum placeat totam ut consequatur similique. Sequi earum autem et autem fugit non odio.

# 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
Voluptatem adipisci quo accusantium eligendi quia recusandae incidunt. Voluptates est cupiditate vel nobis possimus sequi ab. Ipsum corrupti qui laborum sint minima non.

# 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>
Dolore eum minus corporis sunt laudantium. Sint nihil aliquid aut id laborum optio inventore quia. Aut sit quaerat assumenda consectetur. Dolor dolor dolorem maiores tempora in.
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>
Totam accusantium eligendi facilis ea aspernatur voluptatum. Assumenda quasi possimus ut est impedit nobis velit sint. Tempora ut voluptatem ad ratione qui sed aut vel.

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

UI components
Divider
UI components
Icon