Dropdown
A composable dropdown component that can handle both simple navigation menus as well as complex action menus with checkboxes, radios, and submenus.
A super simple dropdown
<x-ui::dropdown :arrow="false">
<x-slot:trigger>
<x-ui::secondary-button>
Dropdown
</x-ui::secondary-button>
</x-slot:trigger>
<div class="flex flex-col">
A super simple dropdown
</div>
</x-ui::dropdown>
Copied!
Trigger
Anything can be a trigger for the dropdown. In most cases it will be a button, therefore you can use the button components directly as a trigger.
Happy popover!
<x-ui::dropdown :arrow="false">
<x-slot:trigger>
<x-ui::secondary-button icon="grip-lines" rightIcon="caret-down" hideTextOnSm>
Dropdown
</x-ui::secondary-button>
</x-slot:trigger>
Happy popover!
</x-ui::dropdown>
Copied!
Arrows & Offset
You can control the position of the dropdown with the offset prop. The arrow prop will add a small arrow to the dropdown.
Happy popover!
<x-ui::dropdown :offset="20" :arrow="true">
<x-slot:trigger>
<x-ui::secondary-button icon="grip-lines" rightIcon="caret-down" hideTextOnSm>
Dropdown with arrow
</x-ui::secondary-button>
</x-slot:trigger>
Happy popover!
</x-ui::dropdown>
Copied!
Use case: List
A classic use case for such component is a list of items. You can use the dropdown component to create a simple list of items or actions.
<x-ui::dropdown offset="22" :arrow="true">
<x-slot:trigger>
<x-ui::secondary-button rightIcon="caret-down">List</x-ui::secondary-button>
</x-slot:trigger>
<div class="flex flex-col">
<x-ui::tertiary-button>Button 1</x-ui::tertiary-button>
<x-ui::tertiary-button>Button 2</x-ui::tertiary-button>
<x-ui::tertiary-button>Button 3</x-ui::tertiary-button>
</div>
</x-ui::dropdown>
Copied!