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>
Ex a sequi facere atque. Architecto vel vel voluptas porro quidem qui deserunt. Perferendis atque rem facere dolores odit sequi.

# 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
Dolore quas et sed cupiditate aut accusamus. Aut ipsa cupiditate repellendus officiis. Velit cum ut beatae aut consequatur aliquid amet neque.

# 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>
Quisquam perferendis nam aut quidem quibusdam ut. Nam culpa et voluptas. Minima dolore iste vel ea exercitationem eligendi enim dolore.
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>
In deserunt molestiae blanditiis qui quisquam quam. Sint quaerat itaque velit. Iste neque eaque quia non.

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

UI components
Divider
UI components
Icon