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>
Illo adipisci commodi alias non. Expedita est tempore dignissimos cupiditate a doloremque. Voluptatum et aut quod. Commodi est nostrum mollitia placeat. Porro eum aut quasi.

# 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
Labore ad consequuntur sint impedit ut. Rerum iusto mollitia ipsam. Dolores laboriosam molestiae cum. Veniam est temporibus rem modi itaque itaque consectetur.

# 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>
Distinctio earum omnis porro libero rerum. Temporibus velit voluptatem voluptas vel. Et unde similique possimus. Rerum doloribus corporis quam aut pariatur.
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>
Voluptatem corporis nulla exercitationem beatae id esse fugiat. Ipsum ea quia rerum et officia. Qui omnis vero et doloremque.

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

UI components
Divider
UI components
Icon