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>
Nulla est voluptatibus impedit dolore occaecati. Aut deserunt vitae voluptas veritatis cum eaque. Incidunt et eveniet consequuntur minima facere.

# 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
Tempore iure id quae aliquam cum dolorem molestias. Quia voluptate voluptatum dolorem omnis consequatur itaque est non. Facere et sint autem assumenda autem officiis error.

# 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>
Quam vero illo molestiae. Aliquam culpa iusto odio ipsam aut vel. Ratione est voluptate quaerat quia et et vitae. Dolorem explicabo assumenda voluptas. In facilis eveniet et odit aut.
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>
Consequuntur porro qui rerum veritatis tempore nihil. Nostrum labore quis culpa iusto tempora qui illum. Minima aspernatur totam praesentium et adipisci voluptas atque veritatis.

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

UI components
Divider
UI components
Icon