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>
Cumque veritatis et earum alias porro doloremque quis. Asperiores aliquid sint qui consequatur. Exercitationem modi debitis odio tempore inventore. Molestiae quos deleniti quo commodi.

# 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
Distinctio et non magni fuga quod. Nihil atque ex qui dolorum. Eum ratione quia cumque omnis facere.

# 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>
Necessitatibus voluptatem distinctio reiciendis fugit dolor et veritatis consequatur. Quidem officiis adipisci expedita dolorum tempore. Aut officia sed quia necessitatibus qui.
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>
Aut corporis in impedit doloremque voluptatem odit officia. Repellat qui enim sed qui. Qui nihil laborum enim aut dolor nostrum molestiae quisquam.

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

UI components
Divider
UI components
Icon