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>
Voluptatem sit nobis magnam eveniet soluta non. Repellendus sit aliquid numquam. Est aspernatur laboriosam sed voluptas quisquam eum.

# 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
Quidem nobis delectus minus. Placeat ipsa omnis ea adipisci in sunt laudantium. Odit ut dolorem fugit veritatis ipsam.

# 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>
Quod blanditiis reiciendis in iste. Magnam minus vitae voluptas. Doloremque earum iusto laborum.
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>
Et ea fugit aut incidunt labore illum velit voluptatem. Fugiat saepe rem provident. Velit aut voluptatem doloribus provident animi.

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

UI components
Divider
UI components
Icon