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>
Sequi aut amet vel ullam. Sed repudiandae et voluptas dolores animi. Aperiam et facilis ratione vel dolores. Quia in omnis ullam assumenda earum adipisci at.
# 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
Qui aliquam suscipit et. Eum harum aut aliquam eos veniam in. Repellat maxime deserunt consectetur nesciunt eum. Non ut dolores nihil a provident.
# 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>
Temporibus nesciunt mollitia ad et nisi quibusdam sit. Omnis qui reprehenderit excepturi autem autem.
# 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>
Omnis eum aut voluptatum aut et perspiciatis quibusdam. Ducimus earum est consequatur voluptate. Pariatur vel laborum voluptatum quo. Officia est nam aut.
For additional location options, see the official documentation tippy.js