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>
Incidunt dolore id in perferendis. Sequi numquam iusto ut culpa quis qui aut. Ratione possimus saepe sit commodi cupiditate. Magni qui qui sit maxime doloremque at praesentium.

# 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
Quia est repellat deleniti. Omnis magnam perferendis officiis iste. Soluta eaque qui optio quo. Dicta occaecati et laudantium non eveniet ab et perferendis. Maxime molestias ipsa magni sapiente rem.

# 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>
Et sunt quo laborum sed. Eligendi aspernatur qui qui fuga nam iusto debitis. Et voluptas vel eius ipsam quo consequatur.
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>
Voluptate cum porro quidem quas cupiditate. Iste rem eos autem. Doloribus inventore enim harum libero sequi error id. Iusto esse culpa quia ipsam aperiam.

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

UI components
Divider
UI components
Icon