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>
Ipsam aliquam odit ut voluptatum suscipit ex qui magni. Dolores rerum expedita et quis incidunt libero ipsa. Omnis cumque ut illo. Consectetur autem exercitationem sint eos omnis quos.

# 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
Dolorem consequatur quibusdam excepturi quae pariatur. Magni quidem aliquid ipsum temporibus molestias officiis adipisci voluptas. Voluptates voluptatem quaerat eum sed aut vel qui.

# 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>
Ut reiciendis iure nihil sequi doloremque. Recusandae odio eveniet esse. Et qui et libero perspiciatis repellendus dicta. Magni numquam velit praesentium ducimus.
Dropdown footer

# 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>
Enim dignissimos molestiae et possimus dolor. Est est quo modi ipsum. Cum est suscipit dolorum quam voluptatum dolorum maxime.

For additional location options, see the official documentation tippy.js

UI components
Divider
UI components
Icon