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>
Sunt sit quisquam alias dolorem voluptatibus tempora hic. Accusamus libero non quam blanditiis quasi quidem vero. Earum numquam qui commodi aspernatur ipsum consequuntur.

# 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
Nobis minus porro nihil occaecati. Et sed consequatur porro consectetur doloremque dolorem. Ullam voluptatem praesentium voluptas magnam.

# 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>
Quis reiciendis aliquid autem optio ut. Cum ut voluptatem aut quasi praesentium aut ut. Sapiente velit ut repellendus architecto ipsam et.
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>
Praesentium doloremque consequatur qui voluptas. Unde pariatur velit quis quibusdam. Libero voluptatem architecto hic suscipit asperiores.

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

UI components
Divider
UI components
Icon