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>
Nesciunt modi facere placeat incidunt. Qui voluptas cumque ex magni. Veniam nam aut excepturi atque neque earum et rerum. Rerum alias et est sit excepturi.

# 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
In molestiae dolor eveniet sed nesciunt nostrum excepturi. Excepturi perspiciatis corrupti ut et et. Illo dolores corrupti assumenda. Et accusamus et modi enim et necessitatibus necessitatibus.

# 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>
Ut libero laboriosam et ex laborum aut. Vitae minima quis cumque illum. Inventore quo dignissimos nam. Quos nulla voluptatibus illo quis corrupti eos. Consequatur et vel ipsam.
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 qui aliquid hic magnam qui. Ducimus illum rerum in enim ex veniam ut. Iure quia dolore soluta autem aspernatur nihil. Natus corrupti ut est amet quis totam excepturi.

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

UI components
Divider
UI components
Icon