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>
Nisi cupiditate itaque culpa eos impedit. Dignissimos vitae corrupti officia voluptas et. Voluptas dolor atque veritatis necessitatibus iusto. Facere blanditiis magni natus dolorem.

# 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
Et quia est vel repellendus vero est. Nisi et quasi ipsum iusto distinctio quibusdam et. Tempora quis maiores ea dolor.

# 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>
Qui et rem quam recusandae. Quo occaecati cupiditate nulla iste. Error eligendi explicabo et.
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>
Voluptatem quo cum nisi sint. Nesciunt eum enim accusantium quisquam. Molestias eligendi sunt tempore consequatur nesciunt ut et.

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

UI components
Divider
UI components
Icon