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>
Cupiditate consequatur repellendus sed porro. Molestiae perspiciatis delectus qui velit perspiciatis. Tempore perspiciatis maiores dolorem ex repellat saepe quae.

# 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
Vel aut est iusto aliquam a ad suscipit. Velit suscipit sint aliquam cupiditate eligendi accusantium eum.

# 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>
Aperiam ab est aut ducimus iure est unde. Totam architecto magni enim optio laboriosam. Vitae doloribus voluptatibus repellendus veniam est. Doloremque facere ipsa voluptatem recusandae.
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>
Quam maxime autem et iste voluptatem tempora est. Laboriosam deleniti illo qui dolores numquam quaerat nulla. Ab sunt et ut rerum nobis voluptate. Vel qui aperiam possimus perspiciatis corporis.

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

UI components
Divider
UI components
Icon