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>
Sed atque quo placeat qui alias officiis. Et recusandae magni quia alias aut cumque eius repudiandae. Molestias qui et est dicta.

# 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
Sed consectetur odio atque explicabo. Eum cum ducimus quia. Quae dicta accusamus laboriosam explicabo. Velit ipsam nulla beatae aut blanditiis dolores.

# 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>
Nemo doloribus temporibus quod omnis et quisquam nisi voluptates. Inventore ullam esse autem soluta. Omnis itaque consequatur modi doloribus. Est dignissimos dolores iste asperiores.
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>
Quo animi sunt aut dicta. Maiores hic voluptatem est voluptatem non. Ut animi quia rerum vitae sapiente eveniet totam.

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

UI components
Divider
UI components
Icon