Dropdown

The previews on this page are live — open them.

<flux:dropdown>
    <flux:button icon:trailing="chevron-down">Order actions</flux:button>

    <flux:menu>
        <flux:menu.item icon="eye">View details</flux:menu.item>
        <flux:menu.item icon="printer">Print invoice</flux:menu.item>
        <flux:menu.separator />
        <flux:menu.item icon="trash" variant="danger">Cancel order</flux:menu.item>
    </flux:menu>
</flux:dropdown>

Position and align

align is logical — start and end follow the reading direction. position takes physical sides (top, right, bottom, left).

<flux:dropdown position="top" align="end">
    <flux:button icon:trailing="chevron-up">Opens upward</flux:button>

    <flux:menu>
        <flux:menu.item>Newest</flux:menu.item>
        <flux:menu.item>Cheapest</flux:menu.item>
    </flux:menu>
</flux:dropdown>

Submenus

<flux:dropdown>
    <flux:button icon:trailing="chevron-down">Sort</flux:button>

    <flux:menu>
        <flux:menu.item icon="eye">View details</flux:menu.item>

        <flux:menu.submenu heading="Sort by" icon="bars-arrow-down">
            <flux:menu.radio checked>Newest</flux:menu.radio>
            <flux:menu.radio>Cheapest</flux:menu.radio>
            <flux:menu.radio>Best selling</flux:menu.radio>
        </flux:menu.submenu>
    </flux:menu>
</flux:dropdown>

Checkboxes and radios

A menu can hold state instead of only actions.

<flux:dropdown>
    <flux:button icon="funnel" icon:trailing="chevron-down">Filters</flux:button>

    <flux:menu>
        <flux:menu.checkbox checked>In stock</flux:menu.checkbox>
        <flux:menu.checkbox>Free shipping</flux:menu.checkbox>
        <flux:menu.checkbox>Discounted</flux:menu.checkbox>
    </flux:menu>
</flux:dropdown>

Groups and headings

<flux:dropdown>
    <flux:button icon:trailing="chevron-down">Account</flux:button>

    <flux:menu>
        <flux:menu.group heading="Account">
            <flux:menu.item icon="user">My profile</flux:menu.item>
            <flux:menu.item icon="shopping-bag" kbd="⌘O">My orders</flux:menu.item>
        </flux:menu.group>

        <flux:menu.separator />

        <flux:menu.item icon="arrow-right-start-on-rectangle" variant="danger">Sign out</flux:menu.item>
    </flux:menu>
</flux:dropdown>

Navmenu

Use flux:navmenu instead of flux:menu when the items are links rather than actions.

<flux:dropdown>
    <flux:button icon="bars-2" square aria-label="Menu" />

    <flux:navmenu>
        <flux:navmenu.item href="#" icon="home">Home</flux:navmenu.item>
        <flux:navmenu.item href="#" icon="fire">Flash deals</flux:navmenu.item>
        <flux:navmenu.separator />
        <flux:navmenu.item href="#" icon="chat-bubble-left-right">Support</flux:navmenu.item>
    </flux:navmenu>
</flux:dropdown>

Reference

flux:dropdown

Prop	Description
position	Options: `top`, `right`, `bottom`, `left`. Default: `bottom`.
align	Options: `start`, `center`, `end`. Default: `start`.
gap	Pixel gap between trigger and panel. Default: `5`.
offset	Pixel shift along the aligned edge. Default: `0`.
hover	Opens on hover instead of click.

flux:menu.item

Prop	Description
icon	Leading icon name.
icon:trailing	Trailing icon name.
icon:variant	Icon variant. Default: `mini`.
variant	Options: `danger`. Default: `default`.
kbd	Keyboard shortcut hint on the trailing edge.
suffix	Extra content on the trailing edge.
value	Value for checkbox and radio items.
href	Renders the item as a link.

Position and align

Submenus

Checkboxes and radios

Groups and headings

Navmenu

Reference

flux:dropdown

flux:menu

flux:menu.item

flux:menu.submenu

flux:menu.separator

flux:menu.group

flux:menu.checkbox

flux:menu.radio

Related