Dropdown

Dropdown component.

Dropdown, Personalization Blocks

Example:

TallStackUi::personalize()
    ->dropdown()
    ->block('block', 'classes');

Dropdown Items, Personalization Blocks

Example:

TallStackUi::personalize()
    ->dropdown('items')
    ->block('block', 'classes');

Dropdown Submenu, Personalization Blocks

Example:

TallStackUi::personalize()
    ->dropdown('submenu')
    ->block('block', 'classes');

# Basic Usage

<x-dropdown text="Menu" position="bottom-end">
    <x-dropdown.items text="Settings" />
    <x-dropdown.items text="Logout" separator />
</x-dropdown>

# Available Positions

All available positions based on the AlpineJS anchor plugin.

<!-- Available Positions:
     bottom,
     bottom-start,
     bottom-end,
     top,
     top-start,
     top-end,
     left,
     left-start,
     left-end,
     right,
     right-start,
     right-end
 -->
 
<x-dropdown text="Menu" position="bottom-start">
    <x-dropdown.items text="Settings" />
    <x-dropdown.items text="Logout" separator />
</x-dropdown>

# Links

<x-dropdown icon="chevron-down" position="bottom-end">
    <a href="https://google.com.br" target="_blank">
        <x-dropdown.items text="Google" />
    </a>
    <a href="https://twitter.com" target="_blank">
        <x-dropdown.items text="Twitter" separator />
    </a>
</x-dropdown>

# Icon

<x-dropdown icon="chevron-down">
    <x-dropdown.items text="Settings" />
    <x-dropdown.items text="Logout" separator />
</x-dropdown>

# Static Icon

An option to use icons without rotate animation

<x-dropdown icon="ellipsis-vertical" static>
    <x-dropdown.items text="Settings" />
    <x-dropdown.items text="Logout" separator />
</x-dropdown>

# Header Slot

<x-dropdown text="Menu">
    <x-slot:header>
        <p>Welcome!</p>
    </x-slot:header>
    <x-dropdown.items icon="cog" text="Settings" />
    <x-dropdown.items icon="arrow-left-on-rectangle" text="Logout" separator />
</x-dropdown>

# Dropdown Submenu

An option to allow the usage of multiples dropdowns nested.

<x-dropdown text="Menu" position="bottom-end">
    <x-dropdown.items text="PHP" />
    <x-dropdown.items text="Python" />
    <x-dropdown.submenu text="Second Level">
        <x-dropdown.items text="JavaScript" />
        <x-dropdown.items text="Java" />
        <x-dropdown.submenu text="Third Level">
            <x-dropdown.items text="C++" />
            <x-dropdown.items text="Golang" />
        </x-dropdown.submenu>
    </x-dropdown.submenu>
</x-dropdown>

You can also set the left chevron icon to the left side if your submenu is left-side oriented:

<x-dropdown text="Menu" position="bottom-end">
    <x-dropdown.items text="PHP" />
    <x-dropdown.items text="Python" />
    <x-dropdown.submenu text="Second Level" position="left-start"> 
        <x-dropdown.items text="JavaScript" />
        <x-dropdown.items text="Java" />
        <x-dropdown.submenu text="Third Level" position="left-start"> 
            <x-dropdown.items text="C++" />
            <x-dropdown.items text="Golang" />
        </x-dropdown.submenu>
    </x-dropdown.submenu>
</x-dropdown>

# Action Slot

<x-dropdown>
    <x-slot:action>
        <x-button x-on:click="show = !show" sm outline>Open</x-button>
    </x-slot:action>
    <x-dropdown.items icon="cog" text="Settings" />
    <x-dropdown.items icon="arrow-left-on-rectangle" text="Logout" separator />
</x-dropdown>

# Events

<x-dropdown text="Menu"
            x-on:open="alert(`Open, 'show' status: ${$event.detail.status}`)"
            x-on:select="alert('Selected')">
    <x-dropdown.items text="Settings" />
    <x-dropdown.items text="Logout" separator />
</x-dropdown>