# Basics
Using the moonshine::dropdown
component you can create drop-down blocks.
<x-moonshine::dropdown> <div class="m-4"> {{ fake()->text() }} </div> <x-slot:toggler>Click me</x-slot:toggler></x-moonshine::dropdown>
Totam dolorem neque nobis quasi est saepe iure. Libero non et et laudantium. Recusandae quaerat dolorem dolorum tenetur voluptatem. Sunt reiciendis labore aut dignissimos officia voluptas.
# Heading
<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
Non inventore est omnis rerum sunt voluptate autem aspernatur. Asperiores ut culpa saepe esse. Sit nulla asperiores repellat quia.
# 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>
Officiis nostrum officiis voluptatem eum amet numquam. Dignissimos ullam voluptatum ut voluptatem et ut. Aut nobis ipsum rerum quod.
# Location
Available locations:
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>
Dolor tempore ducimus ab vel adipisci. Rerum aspernatur maiores qui nostrum delectus. Possimus id harum molestias libero.
Additional location options can be found in the official documentation tippy.js .