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>
Voluptas unde excepturi aut in quod. Perferendis quia debitis nihil qui et. Beatae est minima dolores consectetur eos. Nihil a ratione voluptatibus 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
Optio et molestias facere ex alias eum repellendus enim. Incidunt molestias et quod nobis laboriosam. Aspernatur nulla dicta expedita quam.

# 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>
Recusandae voluptas esse iusto. Qui esse delectus ipsa ut est voluptatem. Officia quod quia adipisci assumenda iusto.
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>
Officiis aliquid et at et. Voluptas optio laborum aut et alias ad.

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

UI components
Divider
UI components
Icon