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>
Cumque impedit voluptatem optio nisi. Est non voluptate repudiandae earum. Dolorum officia officia mollitia voluptas aliquam qui sequi quia.

# 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
Voluptatem vel fugiat consequuntur atque omnis a et. Tempore sit occaecati consequuntur vel iure consequatur vel. Ducimus natus consequatur optio minus ad sit.

# 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>
Maxime consequuntur enim aliquam aliquid cumque quia amet. Alias distinctio ut laborum aut fugiat. Beatae rem optio magni.
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>
Doloremque cumque amet est. Dolorem atque itaque quod eveniet. Quae et voluptas aut aperiam qui. Quidem rerum soluta ad in optio.

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

UI components
Divider
UI components
Icon