# 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>
Eos suscipit expedita possimus in eum. Nisi laborum dicta beatae accusantium corporis dolores provident. Aut est facere culpa. Quos voluptas commodi ut eos facilis asperiores quam.
# 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
Rerum vitae et laudantium unde consequatur. Voluptas sunt illo est voluptatibus rerum quo. Nesciunt consequatur qui dignissimos sed sed.
# 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>
Quod rem autem sit quo illo qui. Impedit incidunt velit temporibus consequatur rerum qui.
# 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>
Accusantium quia molestias magni molestiae minima. Est corporis tenetur expedita sit. Ut est labore deserunt labore dolor vel consequuntur natus.
Additional location options can be found in the official documentation tippy.js .