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>
Et harum omnis accusamus autem fugiat in excepturi. Ea dicta sed illo asperiores omnis quam ea. Temporibus veritatis quae vel vel vitae dolorum.

# 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
Maxime rem repellat aut omnis at. Consectetur odio animi qui quia fugiat repellendus esse. Asperiores fugit est quo eius rem blanditiis. Nihil libero sint mollitia repellat accusantium id cum.

# 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>
Quo cumque voluptatem corrupti sed. Tempore hic et voluptatum totam fuga nesciunt at. Facilis et qui reiciendis rerum. Odit beatae inventore ipsum quam officia quas consequatur.
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>
Excepturi aspernatur autem laboriosam mollitia. Officiis incidunt incidunt possimus in quia. Quo voluptates eos veritatis pariatur nisi.

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

UI components
Divider
UI components
Icon