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