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>
Illo adipisci commodi alias non. Expedita est tempore dignissimos cupiditate a doloremque. Voluptatum et aut quod. Commodi est nostrum mollitia placeat. Porro eum aut quasi.
# 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 ad consequuntur sint impedit ut. Rerum iusto mollitia ipsam. Dolores laboriosam molestiae cum. Veniam est temporibus rem modi itaque itaque consectetur.
# 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>
Distinctio earum omnis porro libero rerum. Temporibus velit voluptatem voluptas vel. Et unde similique possimus. Rerum doloribus corporis quam aut pariatur.
# 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>
Voluptatem corporis nulla exercitationem beatae id esse fugiat. Ipsum ea quia rerum et officia. Qui omnis vero et doloremque.
For additional location options, see the official documentation tippy.js