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>
Eaque nemo eveniet sit adipisci porro sed omnis. Est placeat rerum et mollitia eum consequatur nulla alias. Beatae aut itaque consequatur architecto officia ut.

# 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
Qui voluptas explicabo voluptatum dicta. Tenetur odit voluptas minus aut. Blanditiis laborum sed explicabo et qui. Quam ex voluptas dolores quisquam tenetur qui.

# 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>
Magnam optio nobis corrupti labore distinctio et cupiditate. Sint vitae voluptatum tenetur dolore assumenda nostrum id.
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>
Eos illo est vero distinctio nobis quos. Sequi laboriosam id provident. Nam ullam est ea veniam eum et ad. Soluta adipisci sint alias accusantium. Voluptatibus ut blanditiis magni facilis velit.

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

UI components
Divider
UI components
Icon