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>
Ut harum in soluta voluptatem possimus qui. Dignissimos quis quaerat accusamus sapiente rerum.

# 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
Ducimus atque nobis quae porro et sapiente maiores. Odit velit laudantium nisi culpa sed rerum voluptatem.

# 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>
Non aut et ut veritatis aut. Sed exercitationem a at ipsum consequatur ipsum ut. Blanditiis nostrum sed provident ut debitis nostrum voluptatem 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>
Saepe voluptatem in unde voluptas nihil. Vero in sequi dicta. Asperiores aut ut iusto fuga eaque.

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

UI components
Divider
UI components
Icon