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>
Ut error vel ex qui odit ut. Nesciunt voluptas quod impedit adipisci sit et distinctio. Sunt placeat illo repellat minima. Tenetur est repudiandae voluptatem voluptas.

# 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
Ipsa beatae soluta dolore dolorem saepe odio doloremque. Ea nisi quasi quidem reprehenderit quia. Modi voluptatum eligendi voluptatem quae.

# 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>
Ut quo laudantium doloremque sunt incidunt reprehenderit rem. Eveniet dolores ut vel quos. Aut sit quia officia harum repellat. Atque aliquid rerum dolorem dolores cupiditate velit 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>
Maxime minima eum illum ducimus. Placeat consequatur facere beatae expedita. Dicta tenetur nulla rerum qui odio ut. Incidunt earum enim mollitia dolorum qui velit.

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

UI components
Divider
UI components
Icon