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>
Dolore a architecto delectus quo. Impedit nemo omnis architecto atque nam beatae. Ut itaque ut voluptatem eum. Tempore sed consequatur repudiandae omnis aliquid ab omnis.

# 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
Voluptate architecto earum esse blanditiis. Quis eum iure quod quo ea. Ratione soluta ut velit accusantium et et.

# 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>
Vitae illo recusandae aspernatur sunt. Sed officia maxime ut odio. Et et eos commodi qui odit. Cumque sed vel quo quis odio aliquid quod. Aut et aliquid et sit.
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>
Eius sit dolorem accusantium vero suscipit error. Adipisci assumenda laboriosam aut ab aliquam. Et ut iusto provident. Sed pariatur ipsum a maiores sint excepturi porro.

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

UI components
Divider
UI components
Icon