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>
Illum ut vel unde sunt. Deserunt voluptatibus facere sunt aperiam ullam. Voluptates distinctio qui illo quos quisquam tempora eos.

# 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
Aliquam iure itaque ut autem odit dolores. Ex est quia dolore repellat fugit. Molestias necessitatibus numquam voluptatem cum maxime. Qui sapiente tenetur odio blanditiis beatae.

# 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>
Quis nostrum dicta quo dolorem. Veniam quidem est architecto blanditiis ex. Ratione eos alias tempora velit. Eius quia minima sit occaecati beatae saepe.
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>
Vel consequuntur eum et. Nihil odit molestiae et ratione non explicabo rem quis. Facere et excepturi et reiciendis. Repellat et rem et repudiandae.

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

UI components
Divider
UI components
Icon