TallCraftUI

UI Components

Dropdown

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

Claim Your Discount Now

# Basic usage 

<x-dropdown>
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown title="Account settings">
    @slot('trigger')
        <x-button label="Menu" outline />
    @endslot
 
    <x-dropdown-item label="Profile" icon="user" />
    <x-dropdown-item label="Update password" icon="key" />
    <x-dropdown-item label="Settings" icon="cog-6-tooth" />
 
    <x-separator />
 
    <x-dropdown-item label="Sign out" icon="arrow-right-end-on-rectangle" />
</x-dropdown>
<x-dropdown top>
    @slot('trigger')
        <x-button label="Top" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown top-start>
    @slot('trigger')
        <x-button label="Top start" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown top-end>
    @slot('trigger')
        <x-button label="Top end" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown bottom>
    @slot('trigger')
        <x-button label="Bottom" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown bottom-start>
    @slot('trigger')
        <x-button label="Bottom start" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
{{-- Default --}}
<x-dropdown bottom-end>
    @slot('trigger')
        <x-button label="Bottom end" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown left>
    @slot('trigger')
        <x-button label="Left" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown left-start>
    @slot('trigger')
        <x-button label="Left start" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown left-end>
    @slot('trigger')
        <x-button label="Left end" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown right>
    @slot('trigger')
        <x-button label="Right" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown right-start>
    @slot('trigger')
        <x-button label="Right start" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown right-end>
    @slot('trigger')
        <x-button label="Right end" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
New 
{{-- Default --}}
<x-dropdown fade>
    @slot('trigger')
        <x-button label="Fade" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown slide>
    @slot('trigger')
        <x-button label="Slide" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown flip>
    @slot('trigger')
        <x-button label="Flip" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown rotate>
    @slot('trigger')
        <x-button label="Rotate" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
<x-dropdown w-36>
    @slot('trigger')
        <x-button label="w-36" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
{{-- Default --}}
<x-dropdown w-48>
    @slot('trigger')
        <x-button label="w-48" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown w-64>
    @slot('trigger')
        <x-button label="w-64" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>
 
<x-dropdown w-80>
    @slot('trigger')
        <x-button label="w-80" outline />
    @endslot
 
    <div class="p-5">
        Modal content.
    </div>
</x-dropdown>

# Without transition 

<x-dropdown no-transition>
    @slot('trigger')
        <x-button icon="ellipsis-vertical" flat circle />
    @endslot
 
    <x-dropdown-item label="View" icon="eye" />
    <x-dropdown-item label="Edit" icon="pencil-square" />
    <x-dropdown-item label="Delete" icon="trash" />
</x-dropdown>
<x-dropdown>
    @slot('trigger')
        <x-button icon="ellipsis-vertical" flat circle />
    @endslot
 
    <x-dropdown-item label="View" link="#" icon="eye" />
    <x-dropdown-item label="Edit" link="#" icon="pencil-square" />
    <x-dropdown-item label="Delete" link="#" icon="trash" />
</x-dropdown>

# Persistent 

<x-dropdown persistent>
    @slot('trigger')
        <x-button icon="ellipsis-vertical" flat circle />
    @endslot
 
    <x-dropdown-item label="View" icon="eye" />
    <x-dropdown-item label="Edit" icon="pencil-square" />
    <x-dropdown-item label="Delete" icon="trash" />
</x-dropdown>

Disable focus trap

Change dropdown default settings according your needs config/tallcraftui.php 

return [
    'dropdown' => [
        'width' => Width::W48->value,
        'shadow' => Shadow::Shadow->value,
        'position' => DropdownPosition::BOTTOM_END->value,
        'animation' => DropdownAnimation::FADE->value,
        'border-radius' => BorderRadius::Rounded->value,
    ],
];
Code highlighting powered by Torchlight