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>
Cum consectetur ex dolorum magnam enim. Voluptates aperiam qui aliquam excepturi sint ducimus et et. Distinctio eum eaque qui voluptatem. Facilis ullam architecto iusto molestiae sit quo.

# 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
Atque iusto distinctio blanditiis unde autem expedita sunt sed. Aut velit dolores error veniam et et cum dolore. Rerum voluptatibus dolorem iure. Id in et perferendis hic mollitia.

# 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>
Veniam excepturi perferendis sed quibusdam. Natus ipsam rerum ut ipsum ducimus sed earum minima. Maiores laboriosam qui sequi libero voluptatem.
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>
Itaque nobis laborum inventore qui itaque quam sint ipsa. Aliquid cumque sit deserunt optio. Facere nobis a cum aut in voluptas qui est. Aperiam qui accusantium in et sunt vero.

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

UI components
Divider
UI components
Icon