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>
Est quod eveniet non dicta. Aut facere voluptates deserunt sunt occaecati aut odit. Sit quisquam pariatur rerum ratione repudiandae adipisci.

# 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
Repellendus ut reprehenderit non nemo saepe molestiae rerum. Odio in fugiat quo in. Velit sunt dolor distinctio laborum nihil iure.

# 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>
Aut fuga numquam sequi est quo dignissimos. Blanditiis aut cumque laudantium tempora id. Temporibus alias doloribus dolores quia dolores consequuntur fugiat.
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>
Quam non beatae possimus blanditiis aspernatur qui. Sunt tempore suscipit assumenda et nihil voluptatem. At libero eveniet blanditiis repellendus quasi et aut.

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

UI components
Divider
UI components
Icon