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>
Dicta ut nihil quisquam neque. Dicta eveniet in odit perspiciatis. Molestias nihil inventore in ut nostrum nulla.

# 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
Ut odio ut laudantium a consequuntur vel. Quod velit consequatur aperiam voluptas. Molestias quia molestiae et et.

# 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>
Repellat officiis excepturi iure eveniet veritatis quas. Rerum in molestias quibusdam dolorem minus quis. Autem non ut et amet ratione minima voluptatem.
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>
Veniam numquam quia blanditiis voluptas voluptas porro. Tempore velit voluptatem explicabo rerum accusantium omnis laborum. Et repudiandae quis explicabo impedit.

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

UI components
Divider
UI components
Icon