Components

Dropdown

Compact Menus. Seamless Interaction.

The Dropdown component enables you to create compact, interactive elements that reveal additional content or navigation options when triggered, ideal for headers, navigation bars, filters, or contextual menus.

Whether it’s a navigation menu, filter selector, or feature menu, Dropdowns enable you to deliver clean, accessible designs without overwhelming your interface. Fully customizable with themes and interaction types, this component keeps your content intuitive and uncluttered, ensuring a seamless user experience.

Keep menus clean and focused

  1. Compact by Default.
    Show more only when needed.

  2. Add rich trigger elements.
    Style and position freely.

  3. Familiar UX Patterns
    Open on click or hover.

Flexible Interaction & Style

  1. Trigger Anything
    Your trigger design, your rules.

  2. Hover or Click.
    Control how users engage.

  3. Consistent across layouts.
    Apply visual logic to both triggers and content.

Use Cases

Dropdowns are a staple of clean, space-efficient interfaces. These menus are optimally used where users need to choose or discover additional actions without cluttering the page, but helping you guide users without overwhelming the screen.

Use cases include:

  • Navigation headers with dropdown submenus

  • Account/profile menus in web apps

  • Category selectors or product filters

  • Sort/filter dropdowns in shops or search

  • Multi-option buttons in toolbars or CMS

  • Language or theme switchers

Configuration Options & Features

The Dropdown component enables you to pack more functionality into less space, enhancing usability while maintaining a clean and elegant interface. Whether it’s used for navigation or quick actions, it’s fully customizable, themeable, and responsive.

Trigger content. Reveal options. All without clutter.

Trigger

The clickable (or hoverable) element that reveals the dropdown, which can consist of:

  • Icons (hamburger menu, arrows)

  • Text labels (e.g., “More”, “Categories”)

  • Any custom design (e.g., avatar + name)

This is the entry point to your dropdown logic.

Content

The content container is revealed when the dropdown is active. Supports any components like:

  • Link lists

  • Icons or text

  • Images

  • Interactive tools (e.g., switches, buttons)

Perfect for menus or compact interactive panels.

Open on Hover

A toggle to determine whether the dropdown opens on click or hover.

  • True: Hover opens the dropdown

  • False: Click toggles open/close

Use hover for navigation menus and click for actions or profile panels.

Component Theme

Applies styling to the outer dropdown container.

Content Theme

Styles the revealed dropdown content area, including spacing, background, or text.

Trigger Theme

Applies styling to the trigger element.