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>
Omnis eius quis explicabo iste placeat. Tempore aut error qui ea voluptate distinctio. Veniam commodi nesciunt ut sit nostrum. Sit magni assumenda quis.

# 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
Quam non accusantium libero iusto incidunt id. Beatae unde earum fugit temporibus.

# 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>
Sit aliquam facere consequatur consequatur. Aut rerum rem porro ut tenetur ut inventore. Aut repellat voluptatem modi temporibus quia.
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>
Ut at voluptatem velit ipsa laudantium eum. Dolore reiciendis commodi quam doloremque. Dolores aut nihil corporis reprehenderit. Et aut culpa dolor eius iste. Minus veritatis inventore amet ut.

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

UI components
Divider
UI components
Icon