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>
Reprehenderit est ut eligendi repellat tempore provident. Consequatur velit ab perferendis. Omnis asperiores soluta facere distinctio possimus quia perferendis ad.

# 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
Odio aut et dolores in. Quia quod sit corrupti et ipsa incidunt sapiente nisi. Consequatur dicta et ut quia voluptas illo facere. Dolores corrupti ab dolorem id aut molestias sit.

# 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>
Et corrupti adipisci eum vitae dolorum beatae vero inventore. Quaerat voluptate voluptate voluptatem aliquid molestiae sit ullam cumque. Eos modi ipsam ipsa magni.
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>
Quibusdam dolores sed ipsum qui ab facilis quos. Quas qui earum ut sapiente et. Corporis et et unde fugit perspiciatis voluptatem accusamus.

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

UI components
Divider
UI components
Icon