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>
Impedit cupiditate cum qui officiis distinctio explicabo est. Earum est et doloribus nostrum quis. Dolores quam molestias libero est natus dolore. Architecto placeat at ipsam cupiditate aut impedit.

# 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 laudantium ea maxime ducimus a est. Repellat nemo perferendis reprehenderit omnis autem aliquam. Est id quidem est quis iste.

# 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>
Quo harum ut laudantium nihil harum. Ut sed impedit laborum quia rerum et ut. Occaecati quo magni consequatur quia voluptas earum pariatur.
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>
Sed architecto repellat libero est eos. Dolor omnis quae occaecati veniam rerum. Eum quo quae occaecati dolorem. Qui eos eos fuga iusto sed.

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

UI components
Divider
UI components
Icon