Document

Easily create buttons in different colors, styles and sizes.

1<x-dropdown id="d-01">
2    <!-- The toggle can have every attribute a button can have -->
3    <x-slot:toggle icon-end="chevron-down--micro rotate">Default Dropdown</x-slot:toggle>
4 
5    <x-button type="transparent">Account</x-button>
6    <x-button type="transparent">Settings</x-button>
7    <x-button type="transparent">Subscription</x-button>
8</x-dropdown>

Dropdown Colors

Dropdowns can have different colors.

 1<x-dropdown id="d-991">
 2    <!-- Choose the color of the dropdown by changing the type attribute. -->
 3    <x-slot:toggle type="white">White</x-slot:toggle> 
 4    <x-slot:toggle type="black">Black</x-slot:toggle> 
 5    <x-slot:toggle type="gray">Gray</x-slot:toggle> 
 6    <x-slot:toggle type="primary">Primary</x-slot:toggle> 
 7    <x-slot:toggle type="success">Success</x-slot:toggle> 
 8    <x-slot:toggle type="warning">Warning</x-slot:toggle> 
 9    <x-slot:toggle type="danger">Danger</x-slot:toggle> 
10    <x-slot:toggle type="transparent">Transparent</x-slot:toggle> 
11    <x-slot:toggle type="link">Link</x-slot:toggle> 
12 
13    <x-button type="transparent">Account</x-button>
14    <x-button type="transparent">Settings</x-button>
15    <x-button type="transparent">Subscription</x-button>
16</x-dropdown>

Dropdown Placement

Dropdowns can be placed in different positions. They automatically adjust to the available space.

1<x-dropdown id="d-10" position="start"> 
2</x-dropdown>
3 
4<x-dropdown id="d-11" position="center"> 
5</x-dropdown>
6 
7<x-dropdown id="d-12" position="end"> 
8</x-dropdown>

Flipping Dropdowns

Dropdowns can be flipped upside down. If at the bottom or top is not enough space, the dropdown will automatically flip to the other side.

1<x-dropdown id="d-20" position="start" flip> 
2</x-dropdown>
3 
4<x-dropdown id="d-21" position="center" flip> 
5</x-dropdown>
6 
7<x-dropdown id="d-22" position="end" flip> 
8</x-dropdown>

Image as Dropdown

Use (profile-) images as dropdowns.

 1<x-dropdown id="d-30">
 2    <x-slot:toggle size="xl" icon-end="chevron-down--micro rotate"> 
 3        <img src="{{ Vite::image('avatar/01.jpg') }}" alt="Avatar" /> 
 4    </x-slot:toggle> 
 5</x-dropdown>
 6 
 7<x-dropdown id="d-31">
 8    <x-slot:toggle size="xl" icon-end="chevron-down--micro rotate"> 
 9        <img class="avatar" src="{{ Vite::image('avatar/02.jpg') }}" alt="Avatar" />  
10    </x-slot:toggle> 
11</x-dropdown>
12 
13<x-dropdown id="d-32">
14    <x-slot:toggle class="radius-circle" size="xl" icon-end="chevron-down--micro rotate"> 
15        <img class="radius-circle avatar" src="{{ Vite::image('avatar/03.jpg') }}" alt="Avatar" /> 
16    </x-slot:toggle> 
17</x-dropdown>

Menu Items

Use different components to create complex dropdowns.

 1 
 2<x-dropdown id="d-40">
 3    <x-slot:toggle icon-end="chevron-down--micro rotate">Menu Items</x-slot:toggle>
 4 
 5    <!-- Icons -->
 6    <x-button icon="globe-europe-africa" type="transparent">Website</x-button> 
 7    <x-button icon-end="newspaper" type="transparent">Press</x-button> 
 8 
 9    <!-- Person -->
10    <div class="person">
11        <img class="radius-circle avatar" src="{{ Vite::image('avatar/02.jpg') }}" alt="Sample Image">
12        <div class="details">
13            <span class="name">John Doe</span>
14            <span class="attribute">john.doe@example.com</span>
15        </div>
16    </div>
17    <hr>
18 
19    <!-- Headline -->
20    <span>Company</span>
21 
22    <!-- Split -->
23    <div class="split split-2">
24        <x-button type="gray" size="sm">Edit</x-button>
25        <x-button type="danger" size="sm">Visit</x-button>
26    </div>
27    <hr>
28    <div class="split split-3">
29        <x-button icon="cog-6-tooth--micro text-gray-400" type="transparent" />
30        <x-button icon="bookmark-slash--micro text-orange-500" type="transparent" />
31        <x-button icon="trash--micro text-red-500" type="transparent" />
32    </div>
33</x-dropdown>

Dropdown Height

Dropdowns can have a maximum height. If the content is higher, a scrollbar will appear.

 1<x-dropdown id="d-50" max-height="-1"> <!-- Default value -->
 2    <x-slot:toggle type="white">Unlimited</x-slot:toggle>
 3</x-dropdown>
 4 
 5<x-dropdown id="d-51" max-height="250"> 
 6    <x-slot:toggle type="white">Max 250px</x-slot:toggle>
 7</x-dropdown>
 8 
 9<x-dropdown id="d-51" max-height="150">  
10    <x-slot:toggle type="white">Max 150px</x-slot:toggle>
11</x-dropdown>

Dropdown inside a Group

Place a dropdown next to a button.

 1<div class="btn-group">
 2    <x-button>Button</x-button>
 3 
 4    <x-dropdown id="d-70">
 5        <x-slot:toggle type="white" icon="ellipsis-vertical--micro"></x-slot:toggle>
 6 
 7        <x-button type="transparent">Settings</x-button>
 8        <x-button type="transparent">Subscription</x-button>
 9        <x-button type="transparent">Logout</x-button>
10    </x-dropdown>
11</div>