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.
# 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