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>
Dicta hic laborum repellendus architecto fuga est voluptatibus. Illum commodi illum porro rerum sed corrupti quod. Harum amet consequatur aut culpa fugit at.

# 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
Quis totam a nihil soluta architecto mollitia et laudantium. Placeat officiis cum totam similique consequatur corporis dolorem velit. Ullam odit et culpa dicta aperiam nobis.

# 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>
Rerum voluptatum voluptatem iure et assumenda. Corrupti odit est ut cumque nihil voluptatem qui. Cumque ut sit facilis molestiae commodi veritatis ratione. Totam eos ab occaecati magnam in.
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>
Perferendis possimus quidem quia aliquid rerum accusamus consequatur. In deserunt vel et corrupti illum. Modi repellendus expedita illum dolorem voluptatem molestias.

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

UI components
Divider
UI components
Icon