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>
Omnis non facilis vitae incidunt iusto. Deleniti atque expedita id nulla dolores. Doloribus vel error corrupti inventore aliquam non incidunt repudiandae.

# 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
Laborum necessitatibus magni sequi corporis quis sit. Omnis amet voluptatem voluptatibus architecto iste eum. Id est ut ab qui necessitatibus dolorum. Facilis sed voluptatem natus sed qui ratione.

# 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>
Illum necessitatibus eum omnis rem ut ipsum. Quia et qui corrupti error similique. Sit quos nihil rerum et aut sit. Molestiae excepturi non sint ut sed.
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 non unde est eius. Deleniti debitis ut quia ab deleniti non aspernatur omnis. Ut qui quidem qui voluptas similique repellat eum.

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

UI components
Divider
UI components
Icon