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>
Dolor et molestiae voluptas tempore asperiores. Nam quis qui est in ut aut iste et. Libero recusandae aut magnam.

# 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
Ipsum consequatur illo voluptatum aut pariatur et nesciunt. Voluptatem suscipit ab quaerat inventore unde ut iure. Cum beatae enim consequatur eligendi ex voluptatem velit nostrum.

# 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>
Eligendi beatae ducimus provident nihil. Sunt a in aut odio.
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>
Accusamus non dicta atque possimus et earum. Est nam delectus facere. Voluptatem ratione eos sit exercitationem reiciendis enim nihil. Aperiam reprehenderit sit qui molestiae itaque aut.

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

UI components
Divider
UI components
Icon