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>
Sed beatae temporibus quo. Et quam eveniet quia et aut tempora vel. Vel iusto voluptatem adipisci doloremque molestiae voluptas voluptatibus atque.

# 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
Voluptatem dolores facilis suscipit est omnis rerum totam. Laudantium esse sapiente est iusto corrupti id fugit est.

# 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>
Molestiae sed consequatur ratione cum fugiat ut sunt. Tenetur aut et unde sit repellat dolor. Autem totam et asperiores quia. Quod voluptatum voluptatem dicta quaerat.
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>
Hic cupiditate eum adipisci repellendus. Iure qui rerum eum eum. Rerum magnam incidunt eum inventore quis deleniti.

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

UI components
Divider
UI components
Icon