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>
Sunt sit quisquam alias dolorem voluptatibus tempora hic. Accusamus libero non quam blanditiis quasi quidem vero. Earum numquam qui commodi aspernatur ipsum consequuntur.
# 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
Nobis minus porro nihil occaecati. Et sed consequatur porro consectetur doloremque dolorem. Ullam voluptatem praesentium voluptas magnam.
# 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>
Quis reiciendis aliquid autem optio ut. Cum ut voluptatem aut quasi praesentium aut ut. Sapiente velit ut repellendus architecto ipsam et.
# 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>
Praesentium doloremque consequatur qui voluptas. Unde pariatur velit quis quibusdam. Libero voluptatem architecto hic suscipit asperiores.
For additional location options, see the official documentation tippy.js