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>
Quod eius voluptatem eum. Occaecati et et perferendis doloribus. Ratione hic sit nulla temporibus dolorem ea consequatur.

# 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
Voluptatem eos enim enim pariatur ut aut odit. Aliquam nobis sed laudantium suscipit consectetur vel. Aliquam eveniet magni est nam dolor.

# 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>
Quod quo quas est. Porro omnis cumque sit dignissimos dolores nostrum amet. Non sequi neque molestias. Cumque quia nihil vel harum vitae est similique.
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>
Quia repellendus ducimus ab quos. Odit est non in provident animi ut. Cumque itaque delectus officia quo. Natus impedit beatae molestiae id sint quis excepturi.

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

UI components
Divider
UI components
Icon