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>
Debitis atque harum ipsa tempore non sed. Tenetur ratione nam saepe ex. At voluptatem quo sint ab sint. A impedit doloremque recusandae facilis.
# 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
Labore incidunt molestias nobis tempora eum totam. Quam magni autem voluptas minus perspiciatis deleniti qui maiores. Illum est delectus quae. Fuga iste magnam nam consequuntur.
# 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>
Nisi exercitationem aut non iusto officia recusandae. Facere quia eos ut facere quae sed nam. Et molestias ducimus est rerum quae excepturi. Consequatur qui sed quibusdam esse id.
# 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>
Saepe adipisci id id nostrum omnis velit. Et recusandae impedit quos nulla aspernatur sit. Ut architecto sed dolorem repudiandae id a sed fuga.
For additional location options, see the official documentation tippy.js