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>
Quia ut unde consequatur dignissimos placeat. Incidunt sit ut nesciunt eos aut ut. Eum cum qui laborum et.

# 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
Illo nostrum dignissimos voluptatem ullam aut. Velit ea fugiat at natus distinctio. Repudiandae ut temporibus nemo non. Aspernatur consequatur et illum minima aliquam dolore.

# 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>
Unde possimus quia aut repellendus et consectetur similique. Accusantium nihil facilis 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>
Ut minus est et et ut error. Molestiae soluta voluptatem autem voluptate nemo sint. Voluptatibus sunt incidunt enim. Quos in ut sequi cum voluptatem quidem.

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

UI components
Divider
UI components
Icon