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>
Vel magnam suscipit quod explicabo consequatur soluta. Expedita id facere veniam libero sequi placeat. Nihil veniam repudiandae deserunt quos nam.

# 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
Voluptatibus fuga soluta ea neque. Ullam ipsam id ea id eum. Sed quas nulla libero earum corporis vel nihil. Qui natus rerum accusamus inventore 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>
Repudiandae dolores nostrum maxime fugit cum. Illo in nisi deleniti voluptas. Error modi quia officiis reprehenderit 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>
Occaecati doloribus possimus ipsum maxime iure. Necessitatibus quo qui culpa nulla voluptas. Quia placeat aspernatur quaerat et accusamus.

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

UI components
Divider
UI components
Icon