WARNING! You are browsing the docs for an old version of TallStackUI. See the v4 docs.

Powerful suite of Blade components for TALL Stack apps.

Dropdown

Dropdown component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v4.

# Basic Usage

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

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

You can also use the attributes navigate or navigateHover when using Livewire Navigate mode.

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

# Size

XS
SM
MD
LG 
<!-- Boolean size flags: xs, sm, md (default), lg -->
 
<x-dropdown text="Account" xs>
    <x-dropdown.items text="Profile" icon="user" />
</x-dropdown>
 
<x-dropdown text="Account" sm>
    <x-dropdown.items text="Profile" icon="user" />
</x-dropdown>
 
<x-dropdown text="Account">
    <x-dropdown.items text="Profile" icon="user" />
</x-dropdown>
 
<x-dropdown text="Account" lg>
    <x-dropdown.items text="Profile" icon="user" />
</x-dropdown>

# Width

xxs
xs
sm
md
lg
xl
2xl 
<!-- Available widths: xxs, xs, sm, md, lg, xl, 2xl -->
 
<x-dropdown text="xxs" width="xxs">
    <x-dropdown.items text="xxs" icon="user" />
</x-dropdown>
<x-dropdown text="xs" width="xs">
    <x-dropdown.items text="xs" icon="user" />
</x-dropdown>
<x-dropdown text="sm" width="sm">
    <x-dropdown.items text="sm" icon="user" />
</x-dropdown>
<x-dropdown text="md" width="md">
    <x-dropdown.items text="md" icon="user" />
</x-dropdown>
<x-dropdown text="lg" width="lg">
    <x-dropdown.items text="lg" icon="user" />
</x-dropdown>
<x-dropdown text="xl" width="xl">
    <x-dropdown.items text="xl" icon="user" />
</x-dropdown>
<x-dropdown text="2xl" width="2xl">
    <x-dropdown.items text="2xl" icon="user" />
</x-dropdown>

# Header Slot

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

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

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

Code highlighting provided by Torchlight