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>
Voluptas omnis molestiae ut fugiat velit veritatis atque. Repellendus voluptas praesentium accusantium. Esse itaque atque pariatur rem.

# 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
Est quam eveniet enim. Fuga qui aut laborum omnis sit ad. Quia maiores repudiandae nesciunt sit praesentium maiores in.

# 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>
Est blanditiis beatae placeat aliquam soluta repellat voluptatem. Doloremque adipisci dolore perferendis sit. Quo modi ut excepturi deserunt. Labore laudantium voluptas provident.
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>
Numquam earum dolorum dignissimos iure cum ab doloribus. Repudiandae qui accusamus quaerat autem. Blanditiis sint tenetur inventore magnam quo.

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

UI components
Divider
UI components
Icon