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>
Quod voluptatem iste tenetur a cumque quidem fuga. Reprehenderit quia ea et sunt repellendus perspiciatis voluptatem. Ullam est et et rerum similique. Recusandae non qui in magnam similique expedita.

# 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 voluptate qui aliquid exercitationem pariatur. Cum natus veritatis rerum quidem. Consequatur accusamus eum vitae sit id et numquam.

# 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>
Amet dolor consequatur numquam omnis. Et delectus ea eos quod et sed odio rem. Sequi eos temporibus non rem.
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>
Cupiditate atque quis et amet adipisci. Autem quasi autem placeat autem necessitatibus dolore. Et unde rerum sunt aut.

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

UI components
Divider
UI components
Icon