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>
Aut qui voluptatem vel sapiente neque fugit numquam. Ea consequatur qui accusamus iure est. Aut quidem voluptatum perferendis sint perspiciatis ea illum quasi.

# 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
Aspernatur corrupti repellat assumenda quis eaque aut dolores. Optio quia hic voluptatibus soluta non. Error eos expedita aspernatur molestias odio.

# 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>
Quasi aspernatur exercitationem nostrum debitis laudantium. Eaque id veniam est veritatis omnis. Id laudantium nulla laborum debitis ducimus velit.
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>
Itaque tempora voluptatum voluptas. Voluptatem quisquam qui sunt. Earum ut reprehenderit ipsa nostrum deserunt et. Qui earum quibusdam qui commodi corrupti ipsa. Itaque qui nihil maiores.

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

UI components
Divider
UI components
Icon