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>
Facilis et blanditiis illo saepe voluptatem culpa error. Eveniet eum magni et deleniti vel. Ab qui aperiam tempora dolor aut quia nihil. Voluptatem dolor a non error qui quis provident.

# 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
Dolores sunt qui ratione delectus vero. Id velit et modi unde at. Nihil voluptatem voluptas dolore illum molestias quos. Dolores sunt excepturi ea non minus delectus totam.

# 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>
Corporis aut itaque voluptas eum ab consequatur molestiae. Corrupti expedita optio quia officiis. Quia sint quasi odio porro repellat perspiciatis.
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 veritatis consequatur quia deleniti cumque delectus. Nihil delectus dolor at aut dolores. Eum accusamus eum quis iusto.

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

UI components
Divider
UI components
Icon