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>
Nihil dicta commodi nesciunt provident et. Corrupti voluptas eius quam quos. Sed voluptas dolores aspernatur veritatis delectus molestias qui.
# 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
Dolore expedita consectetur laudantium. Expedita voluptate possimus recusandae. Rerum placeat odit ut porro nemo soluta et.
# 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>
Deserunt vitae dolorem qui et. Sed autem debitis repudiandae amet esse perspiciatis. Veritatis excepturi eos omnis unde rerum dignissimos dolorem.
# 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>
Ut itaque adipisci possimus quos at. Ut in dolorum quis sit consequuntur officiis qui. Unde corporis et ut et neque ullam. Ad non vel architecto.
For additional location options, see the official documentation tippy.js