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>
Itaque vel ducimus voluptatem eveniet provident. Numquam inventore similique eum eligendi in. Velit iusto eum porro et non id tempora. Consectetur perspiciatis et at ipsa.

# 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
Iure quo earum quis. Id sed aperiam fugit. Omnis maxime adipisci consequuntur.

# 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 molestiae perspiciatis amet ex consectetur labore. Optio hic culpa velit beatae. Qui unde officiis tenetur sit.
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>
Officiis itaque aut iusto velit sed. Natus quis laboriosam ut consectetur omnis est et explicabo. Molestias commodi non sit. Qui modi odit cum omnis.

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

UI components
Divider
UI components
Icon