v3.5.0 is out! Dozens of significant improvements overall! Keep your TallStackUI up to date to get the best experience.

Powerful suite of Blade components for TALL Stack apps.

Dropdown

Dropdown component.

# 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