# 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>
Placeat sint cupiditate delectus quisquam. Asperiores consequatur aut necessitatibus dolore accusamus. Aperiam quidem accusamus omnis.
# 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
Dolorem debitis nesciunt voluptates qui ipsam vel accusamus. Magnam vel voluptatibus pariatur eum et. Sequi ea nulla eaque. Laborum sit possimus tenetur.
# 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>
Sunt ratione distinctio est perferendis maiores. Rerum sint dignissimos expedita necessitatibus aspernatur qui. Placeat officia sit libero adipisci et eum.
# 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>
Explicabo unde aut fugiat consequatur consequatur. Aut quo beatae quaerat sint ad earum laboriosam. Quia quis accusantium sapiente laboriosam. Quam cumque est earum ab.
Additional location options can be found in the official documentation tippy.js .