Skip to content

Dropdowns

Toggleable menus for displaying lists of actions, navigation links, and options. Use hu-dropdown as the wrapper, data-dropdown to link triggers to menus, and hu-dropdown-menu for the panel.

Living Demo: All examples on this page are interactive. Click the buttons to open and close the dropdowns.

Basic Dropdown

A simple dropdown with a button trigger and a menu of clickable items. Add data-dropdown="id" to the trigger and a matching id on the menu container.

Basic Dropdown

Dropdown with Icons

Add SVG icons to dropdown items for visual context. Icons are typically placed before the label text.

Icons Dropdown

Dropdown with Dividers

Use hu-dropdown-divider to visually separate groups of related actions within a dropdown menu.

Dividers

Dropdown with Labels

Use hu-dropdown-label to add section headers that categorize groups of dropdown items.

Labels

Right-aligned Dropdown

Add hu-dropdown-menu-right to align the menu to the right edge of the trigger. Useful when the dropdown is near the right side of the viewport.

Right-aligned

Danger Items

Add the hu-danger class to destructive items like delete or remove actions to visually warn users.

Danger Items

Real-World Examples

Real-world dropdown patterns for web applications and control panels.

User Account Dropdown

Account
<div class="hu-dropdown">
    <button class="hu-btn hu-btn-ghost" data-dropdown="hosting-account-menu"
        style="display: flex; align-items: center; gap: 0.5rem;">
        <span style="width: 32px; height: 32px; border-radius: 50%;
            background: var(--hu-primary); color: #fff; display: flex;
            align-items: center; justify-content: center;
            font-size: 0.875rem; font-weight: 600;">JD</span>
        <span>John Doe</span>
        <svg>...chevron...</svg>
    </button>
    <div class="hu-dropdown-menu" id="hosting-account-menu">
        <div class="hu-dropdown-label">Account</div>
        <button class="hu-dropdown-item">
            <svg>...user icon...</svg>
            Profile
        </button>
        <button class="hu-dropdown-item">
            <svg>...settings icon...</svg>
            Settings
        </button>
        <button class="hu-dropdown-item">
            <svg>...billing icon...</svg>
            Billing
        </button>
        <div class="hu-dropdown-divider"></div>
        <button class="hu-dropdown-item">
            <svg>...logout icon...</svg>
            Sign Out
        </button>
    </div>
</div>

Server Actions Dropdown

Power
Danger Zone
<div class="hu-dropdown">
    <button class="hu-btn hu-btn-outline-primary" data-dropdown="hosting-server-menu">
        <svg>...kebab icon...</svg>
        Manage
    </button>
    <div class="hu-dropdown-menu" id="hosting-server-menu">
        <div class="hu-dropdown-label">Power</div>
        <button class="hu-dropdown-item">
            <svg>...play icon...</svg>
            Start
        </button>
        <button class="hu-dropdown-item">
            <svg>...stop icon...</svg>
            Stop
        </button>
        <button class="hu-dropdown-item">
            <svg>...refresh icon...</svg>
            Restart
        </button>
        <div class="hu-dropdown-divider"></div>
        <div class="hu-dropdown-label">Danger Zone</div>
        <button class="hu-dropdown-item hu-danger">
            <svg>...trash icon...</svg>
            Delete Server
        </button>
    </div>
</div>

Navigation Dropdown

Shared Hosting
VPS Hosting
Dedicated
<div class="hu-dropdown">
    <button class="hu-btn hu-btn-ghost" data-dropdown="hosting-nav-menu">
        Hosting Plans
        <svg>...chevron...</svg>
    </button>
    <div class="hu-dropdown-menu" id="hosting-nav-menu">
        <div class="hu-dropdown-label">Shared Hosting</div>
        <button class="hu-dropdown-item">
            <svg>...bolt icon...</svg>
            Starter Plan
        </button>
        <button class="hu-dropdown-item">
            <svg>...bolt icon...</svg>
            Business Plan
        </button>
        <div class="hu-dropdown-divider"></div>
        <div class="hu-dropdown-label">VPS Hosting</div>
        <button class="hu-dropdown-item">
            <svg>...server icon...</svg>
            Cloud VPS
        </button>
        <button class="hu-dropdown-item">
            <svg>...server icon...</svg>
            Managed VPS
        </button>
        <div class="hu-dropdown-divider"></div>
        <div class="hu-dropdown-label">Dedicated</div>
        <button class="hu-dropdown-item">
            <svg>...server icon...</svg>
            Dedicated Server
        </button>
    </div>
</div>

API Reference

Complete reference for all dropdown component classes, modifiers, and data attributes.

CSS Classes

Class Description
hu-dropdown Wrapper container for dropdown trigger and menu
hu-dropdown-menu The dropdown panel containing items
hu-dropdown-menu-right Aligns the menu to the right edge of the trigger
hu-dropdown-item Clickable menu item
hu-dropdown-divider Horizontal separator between item groups
hu-dropdown-label Non-interactive section header
hu-active Active/open state on the dropdown wrapper
hu-danger Marks an item as destructive (red styling)

Data Attributes

Attribute Component Description
data-dropdown Trigger button Links the trigger to a dropdown menu by matching the menu's id attribute