Layouts

Dropdown

A composable dropdown component that can handle both simple navigation menus as well as complex action menus with checkboxes, radios, and submenus.

Name
Date
Popularity
Draft
Published
Archived

Display a simple set of links in a dropdown menu.

Use the navmenu component for a simple collections of links. Otherwise, use the menu component for action menus that require keyboard navigation, submenus, etc.

Positioning

Customize the position of the dropdown menu via the position and align props. You can first pass the base position: top, bottom, left, and right, then an alignment modifier like start, center, or end.

Offset & gap

Customize the offset/gap of the dropdown menu via the offset and gap props. These properties accept values in pixels.

Keyboard hints

Add keyboard shortcut hints to menu items to teach users how to navigate your app faster.

Checkbox items

Select one or many menu options.

Read
Write
Delete

Radio items

Select a single menu option.

Latest activity
Date created
Most popular

Groups

Visually group related menu items with a separator line.

Groups with headings

Group options under headings to make them more discoverable.

Account
Billing

Nest submenus for more condensed menus.

Name
Date
Popularity
Draft
Published
Archived
Copyright © 2024 Wireable LLC · Terms of Service
Built with
by Caleb Porzio and Hugo Sainte-Marie