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>
Quas eos beatae vitae. Est voluptatibus minus nisi quis saepe. Quaerat praesentium tempore quas velit consequatur reprehenderit similique molestiae.

# 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
Earum ut inventore inventore atque voluptas error. Voluptatem amet est aut corporis ratione aut soluta. Quia animi vel qui sapiente iure. Id quos quia eaque nihil reiciendis.

# 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>
Sint maxime consequatur sed. Sequi qui quia eveniet quia. Suscipit deserunt architecto ullam debitis. Pariatur ipsum fugiat et debitis.
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>
Ex omnis harum molestiae nostrum non hic. Ratione corporis ipsam consectetur. Officiis quo perferendis id quis. Dicta illum ab fuga ducimus libero sed.

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

UI components
Divider
UI components
Icon