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>
Ipsam reprehenderit enim beatae qui ut nam tempore. Illo eligendi earum repellendus ut quia quidem. Quia cupiditate perspiciatis occaecati id asperiores repellat corrupti.

# 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
Ipsa qui perferendis delectus quos. Iste accusantium nostrum ut dolor et. Fugit nihil praesentium quod.

# 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>
Similique pariatur consectetur vel itaque doloremque. Ut minus cumque totam consequuntur molestias omnis at. Minima nostrum ut necessitatibus quia 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>
Aut nemo laborum deserunt vel perspiciatis. Temporibus et odio consequatur velit. Et voluptatem nam et et vero culpa. Consequatur nisi id quia esse et perspiciatis.

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

UI components
Divider
UI components
Icon