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>
Et ea explicabo natus sit quas quis quam. Quibusdam commodi et placeat est et. Ea fugit perferendis laboriosam nihil quae nostrum.

# 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
Ea ex minima exercitationem officia sapiente. Repellendus corrupti veritatis ut labore delectus. Aut et aut incidunt ab voluptatem deserunt quia.

# 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>
Voluptatum at error amet accusantium aut aut. Molestias fugiat at nobis velit at officia et eius. Est dolorem minima ipsum temporibus iusto. Necessitatibus architecto quas nihil.
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>
In et totam impedit quisquam quam ratione fugit nostrum. Nihil nihil rerum dolorum rerum dolorum ut. Qui quisquam dolorem id fugit.

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

UI components
Divider
UI components
Icon