Dropdown

# Basics

Using the moonshine::dropdown component you can create drop-down blocks. 

<x-moonshine::dropdown>
    <div class="m-4">
        {{ fake()->text() }}
    </div>
    <x-slot:toggler>Click me</x-slot:toggler>
</x-moonshine::dropdown>
Eligendi voluptatem voluptatem non ut aliquid. Sit autem delectus et magni laborum dolorem ut.

# Heading 

<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
Repudiandae aut et modi debitis. Alias est laudantium aut omnis et. Sed officiis quo aperiam ipsum. Modi vero qui cupiditate quo.

# 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>
Ex ut qui voluptates. Atque id qui voluptas iure rerum placeat illum amet. Nulla sapiente non et commodi sapiente.
Dropdown footer

# Location

Available locations:

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>
Numquam eaque quia mollitia molestiae excepturi ipsum. Laboriosam quibusdam molestiae hic ex totam error. Sed rerum aliquam veniam. Totam quam rerum assumenda odio velit aspernatur officiis aut.

Additional location options can be found in the official documentation tippy.js .

UI components
Divider
UI components
Icon