Dropdown

Dropdown component.

Dropdown, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

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

The soft personalization should be done in boot method of service providers.

Dropdown Items, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

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

The soft personalization should be done in boot method of service providers.

# Basic Usage

Settings Logout

<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.

Settings Logout

<!-- 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

Google Twitter

<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

Settings Logout

<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

Settings Logout

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

# Header Slot

Welcome!

Settings Logout

<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>

# Action Slot

Settings Logout

<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>