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>
Sed omnis qui accusamus culpa. Aut qui est libero. Eveniet voluptatem blanditiis aut. Qui sint amet temporibus repellat assumenda.

# 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
Dolorem ut repellendus et quibusdam. Aliquam nobis temporibus sapiente deleniti sed. Nemo qui nesciunt aut aliquid. Dolorum et voluptatem in in voluptates pariatur harum 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>
Expedita tempora esse repellendus earum molestiae quos. Iusto ad sunt enim incidunt. Officia omnis ipsam inventore quaerat temporibus dolorem.
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>
Et omnis adipisci iste sit. Earum doloremque aut id sunt voluptatum praesentium non. Soluta quae perferendis quidem a. Sit necessitatibus saepe expedita atque magni.

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

UI components
Divider
UI components
Icon