The Dropdown component is a button that, when clicked, displays a list of options. It is used to allow users to select one option from a list of options.
The simplest use of the Dropdown component is to provide a list of options to the user. The Dropdown component can be used in a variety of ways, such as in a form, in a table, or as a standalone component.
<zinq:dropdown>
<x-slot name="trigger">
<zinq:button>Menu</zinq:button>
</x-slot>
<zinq:dropdown.link href="#">Account</zinq:dropdown.link>
<zinq:dropdown.link href="#">Transactions</zinq:dropdown.link>
</zinq:dropdown>
The <zinq:dropdown.separator>
component can be used to separate the links in the Dropdown component.
<zinq:dropdown>
<x-slot name="trigger">
<zinq:button>Menu</zinq:button>
</x-slot>
<zinq:dropdown.link href="#">Account</zinq:dropdown.link>
<zinq:dropdown.link href="#">Transactions</zinq:dropdown.link>
<zinq:dropdown.separator></zinq:dropdown.separator>
<zinq:dropdown.link href="#">Logout</zinq:dropdown.link>
</zinq:dropdown>
The Dropdown container can be sized using the sm
attribute.
<zinq:dropdown sm>
<x-slot name="trigger">
<zinq:button>Menu</zinq:button>
</x-slot>
<zinq:dropdown.link href="#">Account</zinq:dropdown.link>
<zinq:dropdown.link href="#">Transactions</zinq:dropdown.link>
</zinq:dropdown>
The Dropdown links can be sized using the smLinks
attribute.
<zinq:dropdown smLinks>
<x-slot name="trigger">
<zinq:button>Menu</zinq:button>
</x-slot>
<zinq:dropdown.link href="#">Account</zinq:dropdown.link>
<zinq:dropdown.link href="#">Transactions</zinq:dropdown.link>
</zinq:dropdown>