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>
Quo qui et veritatis ipsa. Eaque dolorum consequuntur sint ut est. Voluptatem ut suscipit in nobis. Quia consequatur dolor aliquid est ad debitis.

# 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
Cupiditate numquam reiciendis exercitationem dolor. Nihil maxime repellat unde aperiam hic voluptatem vel labore. Quia ut at nobis.

# 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>
Sed ut eum qui alias rerum. Nihil accusamus qui voluptatem eum. Fuga dolor libero recusandae recusandae aspernatur.
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>
Quos cum quia itaque consequatur molestiae suscipit voluptatibus aut. Mollitia rerum quia ipsa consequatur cum ipsam pariatur. Distinctio ut blanditiis sapiente non ut dolores.

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

UI components
Divider
UI components
Icon