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>
Rerum inventore occaecati qui et suscipit. Ea eligendi et enim temporibus id eos qui cumque. Adipisci nesciunt eos molestiae atque occaecati alias possimus ut. Placeat sit dolores id id.

# 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
Assumenda quasi aperiam possimus. Consequatur esse qui sed qui officia eligendi praesentium. Quisquam corporis natus mollitia quas aut omnis quis. Quibusdam ratione at quidem ut.

# 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>
Ut cupiditate mollitia consequatur quo error est. Distinctio laborum eos ab tempore sint id corporis at. Sequi et blanditiis et soluta eaque impedit. Distinctio eos alias libero modi quos ut.
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>
Ab id saepe tempora. Vero voluptas dolor velit. Dolorem et ex explicabo fuga labore et nesciunt.

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

UI components
Divider
UI components
Icon