The dropdown component offers a versatile and customizable user interface element that allows users to select from a list of options. It provides the flexibility to change the appearance of the dropdown button, customize item headers, and add separators as needed. With options for adjusting heights and widths and the ability to apply various starting positions, this component is highly adaptable to different design preferences and functional requirements. Furthermore, it supports the inclusion of icons within individual items and the modification of the triggering component, making it a powerful tool for creating user-friendly and tailored interfaces.
The dropdown can be initially displayed with a default ellipsis-vertical icon, but it offers the flexibility to customize it by replacing it with the icon of your choice.
1<x-dropdown> 2 <x-dropdown.item label="Settings" /> 3 <x-dropdown.item label="My Profile" /> 4 <x-dropdown.item label="Logout" /> 5</x-dropdown> 6 7<x-dropdown icon="bars-3"> 8 <x-dropdown.item label="Settings" /> 9 <x-dropdown.item label="My Profile" />10 <x-dropdown.item label="Logout" />11</x-dropdown>Another advantage of dropdowns is their ability to group items using headers.
1<x-dropdown> 2 <x-dropdown.header label="Settings"> 3 <x-dropdown.item label="Preferences" /> 4 <x-dropdown.item label="My Profile" /> 5 </x-dropdown.header> 6 7 <x-dropdown.header label="Actions"> 8 <x-dropdown.item label="Logout" /> 9 </x-dropdown.header>10</x-dropdown>Additionally, there's an option to include separators for both items and headers.
1<x-dropdown> 2 <x-dropdown.header label="Settings"> 3 <x-dropdown.item label="Preferences" /> 4 <x-dropdown.item label="My Profile" /> 5 </x-dropdown.header> 6 7 <x-dropdown.item separator label="Help Center" /> 8 <x-dropdown.item label="Live Chat" /> 9 <x-dropdown.item label="Logout" />10</x-dropdown>11 12<x-dropdown icon="bars-3">13 <x-dropdown.header label="Settings">14 <x-dropdown.item label="Preferences" />15 <x-dropdown.item label="My Profile" />16 </x-dropdown.header>17 18 <x-dropdown.header separator label="Actions">19 <x-dropdown.item label="Logout" />20 </x-dropdown.header>21</x-dropdown>In this updated WireUI version, we offer a variety of height options that are fully customizable to suit your preferences.
1{{-- CSS: 'max-h-40' --}} 2<x-dropdown icon="bars-3" height="sm"> 3 <x-dropdown.item label="Test 1" /> 4 <x-dropdown.item label="Test 2" /> 5 <x-dropdown.item label="Test 3" /> 6 <x-dropdown.item label="Test 4" /> 7 <x-dropdown.item label="Test 5" /> 8 <x-dropdown.item label="Test 6" /> 9 <x-dropdown.item label="Test 7" /> 10 <x-dropdown.item label="Test 8" /> 11 <x-dropdown.item label="Test 9" /> 12 <x-dropdown.item label="Test 10" /> 13</x-dropdown> 14 15{{-- CSS: 'max-h-44' --}} 16<x-dropdown icon="bars-3" height="md"> 17 <x-dropdown.item label="Test 1" /> 18 <x-dropdown.item label="Test 2" /> 19 <x-dropdown.item label="Test 3" /> 20 <x-dropdown.item label="Test 4" /> 21 <x-dropdown.item label="Test 5" /> 22 <x-dropdown.item label="Test 6" /> 23 <x-dropdown.item label="Test 7" /> 24 <x-dropdown.item label="Test 8" /> 25 <x-dropdown.item label="Test 9" /> 26 <x-dropdown.item label="Test 10" /> 27</x-dropdown> 28 29{{-- CSS: 'max-h-48' --}} 30<x-dropdown icon="bars-3" height="lg"> 31 <x-dropdown.item label="Test 1" /> 32 <x-dropdown.item label="Test 2" /> 33 <x-dropdown.item label="Test 3" /> 34 <x-dropdown.item label="Test 4" /> 35 <x-dropdown.item label="Test 5" /> 36 <x-dropdown.item label="Test 6" /> 37 <x-dropdown.item label="Test 7" /> 38 <x-dropdown.item label="Test 8" /> 39 <x-dropdown.item label="Test 9" /> 40 <x-dropdown.item label="Test 10" /> 41</x-dropdown> 42 43{{-- CSS: 'max-h-52' --}} 44<x-dropdown icon="bars-3" height="xl"> 45 <x-dropdown.item label="Test 1" /> 46 <x-dropdown.item label="Test 2" /> 47 <x-dropdown.item label="Test 3" /> 48 <x-dropdown.item label="Test 4" /> 49 <x-dropdown.item label="Test 5" /> 50 <x-dropdown.item label="Test 6" /> 51 <x-dropdown.item label="Test 7" /> 52 <x-dropdown.item label="Test 8" /> 53 <x-dropdown.item label="Test 9" /> 54 <x-dropdown.item label="Test 10" /> 55</x-dropdown> 56 57{{-- CSS: 'max-h-56' --}} 58<x-dropdown icon="bars-3" height="2xl"> 59 <x-dropdown.item label="Test 1" /> 60 <x-dropdown.item label="Test 2" /> 61 <x-dropdown.item label="Test 3" /> 62 <x-dropdown.item label="Test 4" /> 63 <x-dropdown.item label="Test 5" /> 64 <x-dropdown.item label="Test 6" /> 65 <x-dropdown.item label="Test 7" /> 66 <x-dropdown.item label="Test 8" /> 67 <x-dropdown.item label="Test 9" /> 68 <x-dropdown.item label="Test 10" /> 69</x-dropdown> 70 71{{-- CSS: 'max-h-60' - DEFAULT --}} 72<x-dropdown icon="bars-3" height="3xl"> 73 <x-dropdown.item label="Test 1" /> 74 <x-dropdown.item label="Test 2" /> 75 <x-dropdown.item label="Test 3" /> 76 <x-dropdown.item label="Test 4" /> 77 <x-dropdown.item label="Test 5" /> 78 <x-dropdown.item label="Test 6" /> 79 <x-dropdown.item label="Test 7" /> 80 <x-dropdown.item label="Test 8" /> 81 <x-dropdown.item label="Test 9" /> 82 <x-dropdown.item label="Test 10" /> 83</x-dropdown> 84 85{{-- CSS: 'max-h-64' --}} 86<x-dropdown icon="bars-3" height="4xl"> 87 <x-dropdown.item label="Test 1" /> 88 <x-dropdown.item label="Test 2" /> 89 <x-dropdown.item label="Test 3" /> 90 <x-dropdown.item label="Test 4" /> 91 <x-dropdown.item label="Test 5" /> 92 <x-dropdown.item label="Test 6" /> 93 <x-dropdown.item label="Test 7" /> 94 <x-dropdown.item label="Test 8" /> 95 <x-dropdown.item label="Test 9" /> 96 <x-dropdown.item label="Test 10" /> 97</x-dropdown> 98 99{{-- CSS: 'max-h-72' --}}100<x-dropdown icon="bars-3" height="5xl">101 <x-dropdown.item label="Test 1" />102 <x-dropdown.item label="Test 2" />103 <x-dropdown.item label="Test 3" />104 <x-dropdown.item label="Test 4" />105 <x-dropdown.item label="Test 5" />106 <x-dropdown.item label="Test 6" />107 <x-dropdown.item label="Test 7" />108 <x-dropdown.item label="Test 8" />109 <x-dropdown.item label="Test 9" />110 <x-dropdown.item label="Test 10" />111</x-dropdown>112 113{{-- CSS: 'max-h-80' --}}114<x-dropdown icon="bars-3" height="6xl">115 <x-dropdown.item label="Test 1" />116 <x-dropdown.item label="Test 2" />117 <x-dropdown.item label="Test 3" />118 <x-dropdown.item label="Test 4" />119 <x-dropdown.item label="Test 5" />120 <x-dropdown.item label="Test 6" />121 <x-dropdown.item label="Test 7" />122 <x-dropdown.item label="Test 8" />123 <x-dropdown.item label="Test 9" />124 <x-dropdown.item label="Test 10" />125</x-dropdown>126 127{{-- CSS: 'max-h-96' --}}128<x-dropdown icon="bars-3" height="7xl">129 <x-dropdown.item label="Test 1" />130 <x-dropdown.item label="Test 2" />131 <x-dropdown.item label="Test 3" />132 <x-dropdown.item label="Test 4" />133 <x-dropdown.item label="Test 5" />134 <x-dropdown.item label="Test 6" />135 <x-dropdown.item label="Test 7" />136 <x-dropdown.item label="Test 8" />137 <x-dropdown.item label="Test 9" />138 <x-dropdown.item label="Test 10" />139</x-dropdown>140 141{{-- Or Custom --}}142<x-dropdown icon="bars-3" height="max-h-[22rem]">143 <x-dropdown.item label="Test 1" />144 <x-dropdown.item label="Test 2" />145 <x-dropdown.item label="Test 3" />146 <x-dropdown.item label="Test 4" />147 <x-dropdown.item label="Test 5" />148 <x-dropdown.item label="Test 6" />149 <x-dropdown.item label="Test 7" />150 <x-dropdown.item label="Test 8" />151 <x-dropdown.item label="Test 9" />152 <x-dropdown.item label="Test 10" />153</x-dropdown>Likewise, the width can be tailored to your needs, with a wide range of customizable values available.
1{{-- CSS: 'w-40' --}} 2<x-dropdown icon="bars-3" width="sm"> 3 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" /> 4 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" /> 5</x-dropdown> 6 7{{-- CSS: 'w-44' --}} 8<x-dropdown icon="bars-3" width="md"> 9 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />10 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />11</x-dropdown>12 13{{-- CSS: 'w-48' - DEFAULT --}}14<x-dropdown icon="bars-3" width="lg">15 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />16 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />17</x-dropdown>18 19{{-- CSS: 'w-52' --}}20<x-dropdown icon="bars-3" width="xl">21 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />22 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />23</x-dropdown>24 25{{-- CSS: 'w-56' --}}26<x-dropdown icon="bars-3" width="2xl">27 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />28 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />29</x-dropdown>30 31{{-- CSS: 'w-60' --}}32<x-dropdown icon="bars-3" width="3xl">33 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />34 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />35</x-dropdown>36 37{{-- CSS: 'w-64' --}}38<x-dropdown icon="bars-3" width="4xl">39 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />40 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />41</x-dropdown>42 43{{-- CSS: 'w-72' --}}44<x-dropdown icon="bars-3" width="5xl">45 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />46 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />47</x-dropdown>48 49{{-- CSS: 'w-80' --}}50<x-dropdown icon="bars-3" width="6xl">51 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />52 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />53</x-dropdown>54 55{{-- CSS: 'w-96' --}}56<x-dropdown icon="bars-3" width="7xl">57 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />58 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />59</x-dropdown>60 61{{-- Or Custom --}}62<x-dropdown icon="bars-3" width="w-[17rem]">63 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />64 <x-dropdown.item label="Test 1 - Test 2 - Test 3 - Test 4 - Test 5 - Test 6 - Test 7" />65</x-dropdown>Leveraging the capabilities of the Floating UI, we can apply various initial positions to the dropdown.
1<x-dropdown icon="arrow-up" position="top"> 2 <x-dropdown.item label="Settings" /> 3 <x-dropdown.item label="My Profile" /> 4 <x-dropdown.item label="Logout" /> 5</x-dropdown> 6 7<x-dropdown icon="arrow-up-right" position="top-start"> 8 <x-dropdown.item label="Settings" /> 9 <x-dropdown.item label="My Profile" />10 <x-dropdown.item label="Logout" />11</x-dropdown>12 13<x-dropdown icon="arrow-up-left" position="top-end">14 <x-dropdown.item label="Settings" />15 <x-dropdown.item label="My Profile" />16 <x-dropdown.item label="Logout" />17</x-dropdown>18 19<x-dropdown icon="arrow-right" position="right">20 <x-dropdown.item label="Settings" />21 <x-dropdown.item label="My Profile" />22 <x-dropdown.item label="Logout" />23</x-dropdown>24 25<x-dropdown icon="arrow-down-right" position="right-start">26 <x-dropdown.item label="Settings" />27 <x-dropdown.item label="My Profile" />28 <x-dropdown.item label="Logout" />29</x-dropdown>30 31<x-dropdown icon="arrow-up-right" position="right-end">32 <x-dropdown.item label="Settings" />33 <x-dropdown.item label="My Profile" />34 <x-dropdown.item label="Logout" />35</x-dropdown>36 37<x-dropdown icon="arrow-down" position="bottom">38 <x-dropdown.item label="Settings" />39 <x-dropdown.item label="My Profile" />40 <x-dropdown.item label="Logout" />41</x-dropdown>42 43<x-dropdown icon="arrow-down-right" position="bottom-start">44 <x-dropdown.item label="Settings" />45 <x-dropdown.item label="My Profile" />46 <x-dropdown.item label="Logout" />47</x-dropdown>48 49<x-dropdown icon="arrow-down-left" position="bottom-end">50 <x-dropdown.item label="Settings" />51 <x-dropdown.item label="My Profile" />52 <x-dropdown.item label="Logout" />53</x-dropdown>54 55<x-dropdown icon="arrow-left" position="left">56 <x-dropdown.item label="Settings" />57 <x-dropdown.item label="My Profile" />58 <x-dropdown.item label="Logout" />59</x-dropdown>60 61<x-dropdown icon="arrow-down-left" position="left-start">62 <x-dropdown.item label="Settings" />63 <x-dropdown.item label="My Profile" />64 <x-dropdown.item label="Logout" />65</x-dropdown>66 67<x-dropdown icon="arrow-up-left" position="left-end">68 <x-dropdown.item label="Settings" />69 <x-dropdown.item label="My Profile" />70 <x-dropdown.item label="Logout" />71</x-dropdown>We can also include icons to be displayed within individual items.
1<x-dropdown> 2 <x-dropdown.header label="Settings"> 3 <x-dropdown.item icon="cog" label="Preferences" /> 4 <x-dropdown.item icon="user" label="My Profile" /> 5 </x-dropdown.header> 6 7 <x-dropdown.item separator label="Help Center" /> 8 <x-dropdown.item label="Live Chat" /> 9 <x-dropdown.item label="Logout" />10</x-dropdown>You can utilize the trigger slot to modify the component that triggers the dropdown rendering.
1<x-dropdown>2 <x-slot name="trigger">3 <x-button label="Options" primary />4 </x-slot>5 6 <x-dropdown.item label="Help Center" />7 <x-dropdown.item separator label="Live Chat" />8 <x-dropdown.item separator label="Logout" />9</x-dropdown>For enhanced item customization, you can pass the element as the slot.
1<x-dropdown> 2 <x-dropdown.item> 3 <b>Help Center</b> 4 </x-dropdown.item> 5 6 <x-dropdown.item separator> 7 <b>Live Chat</b> 8 </x-dropdown.item> 9 10 <x-dropdown.item separator>11 <b>Logout</b>12 </x-dropdown.item>13</x-dropdown>