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>
Voluptatem nihil est velit voluptatem dignissimos et. Numquam doloribus enim ea aut. Maxime eaque ut magni eum id.

# 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
Aliquid odio nihil occaecati ut quas est id. Quis ab aut corrupti ratione. Id impedit quibusdam accusamus eum 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>
Saepe in repudiandae voluptatibus et qui. Blanditiis aut architecto qui aliquid atque atque. Hic commodi et veniam 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>
Ut minus facilis aut tenetur consequatur impedit architecto et. Est mollitia nesciunt autem sit. Sunt architecto hic aliquam accusamus cupiditate assumenda enim.

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

UI components
Divider
UI components
Icon