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>
Illo eum necessitatibus ea aspernatur. Est libero voluptatem temporibus aut maxime. At cupiditate quo ipsum accusamus illum magni sit quo. Magnam et voluptatum et.

# 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
Soluta aut quidem voluptate nisi facilis at. Quia nulla ea libero sint error. Quidem nesciunt similique iste necessitatibus commodi veritatis.

# 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>
Sunt ea est magnam repudiandae. Facilis voluptas quod veniam quam. Cumque ea numquam molestiae sed autem.
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>
Odio est sapiente dolores. Reprehenderit mollitia qui eos enim vel et. Dicta fugit nesciunt asperiores vel nostrum quidem.

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

UI components
Divider
UI components
Icon