Components / Dropdown

Dropdown

# Introduction

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.

# Usage

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>

# Separator

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>

# Sizing

# Container

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>