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>
Reprehenderit magni non iusto omnis. Non aut ut rem asperiores voluptates. Aspernatur odit a sit perferendis.

# 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
Enim et voluptas ut voluptas non architecto veritatis. Illum sed quia sapiente aliquam nisi. Sapiente optio dicta et tempora qui. Atque fugit in rem non. Rerum aut vel eaque qui.

# 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>
Tempore consequatur aut dolorum. Officia ad nostrum aut tempora. Quam enim iste ipsam. Quas quia sit quibusdam. Et optio dolorum eveniet quo quia aliquam accusantium.
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>
Ea commodi voluptatem rerum aliquam odio. Expedita omnis et similique officiis est dicta. Rerum nemo magnam aut aut a inventore nihil. Dolorum tenetur rerum odio ut.

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

UI components
Divider
UI components
Icon