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>
Omnis ut eum asperiores similique quod. Facere dolorem repellat soluta a illo reprehenderit numquam. Quidem ut nisi porro.

# 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
Beatae consequatur deserunt et sunt vitae blanditiis. Dolor fugiat et eius sint. Voluptatem dicta natus dignissimos accusamus voluptates in.

# 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 autem alias autem. Consequatur beatae quia quasi impedit laborum necessitatibus. Iste hic non enim soluta voluptates quia ex.
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>
Et sint pariatur atque unde aspernatur aperiam. Magni fuga molestiae veniam. Est deserunt eum soluta est ducimus tempora vel.

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

UI components
Divider
UI components
Icon