stable css 1.3.1 · js 1.2.0

Dropdown

A trigger that reveals a floating menu. The menu opens in the top layer with automatic flip and clamp. Mounts itself — link ng_dropdown.js.

A ng-dropdown wraps a ng-dropdown-trigger and a ng-dropdown-menu of links or buttons. Click toggles is-open; Esc and an outside click close it.

Basic

dropdown.html

<div class="ng-dropdown">
    <button type="button" class="ng-btn ng-btn-primary ng-dropdown-trigger">
        Menu <i class="ph ph-caret-down"></i>
    </button>
    <div class="ng-dropdown-menu">
        <a href="#">Profile</a>
        <a href="#">Settings</a>
        <div class="ng-dropdown-divider"></div>
        <button type="button">Sign out</button>
    </div>
</div>

Alignment

Align the menu to the trigger with align-left (default), align-right or align-center.

dropdown.html

<div class="ng-dropdown align-right">
    <button type="button" class="ng-btn ng-btn-primary ng-dropdown-trigger">
        Aligned right <i class="ph ph-caret-down"></i>
    </button>
    <div class="ng-dropdown-menu">
        <a href="#">Profile</a>
        <a href="#">Settings</a>
        <div class="ng-dropdown-divider"></div>
        <button type="button">Sign out</button>
    </div>
</div>

Hover mode

Add hover-mode to open on hover instead of click.

dropdown.html

<div class="ng-dropdown hover-mode">
    <button type="button" class="ng-btn ng-btn-primary ng-dropdown-trigger">
        Hover me <i class="ph ph-caret-down"></i>
    </button>
    <div class="ng-dropdown-menu">
        <a href="#">Profile</a>
        <a href="#">Settings</a>
        <div class="ng-dropdown-divider"></div>
        <button type="button">Sign out</button>
    </div>
</div>

Arrow & title

with-arrow adds a pointer to the trigger; ng-dropdown-title labels a section.

dropdown.html

<div class="ng-dropdown with-arrow">
    <button type="button" class="ng-btn ng-btn-primary ng-dropdown-trigger">
        Account <i class="ph ph-caret-down"></i>
    </button>
    <div class="ng-dropdown-menu">
        <div class="ng-dropdown-title">Signed in as Jane</div>
        <a href="#">Profile</a>
        <a href="#">Settings</a>
        <div class="ng-dropdown-divider"></div>
        <button type="button">Sign out</button>
    </div>
</div>

Anatomy

ng-dropdown ng-dropdown-trigger ng-dropdown-menu ng-dropdown-title ng-dropdown-divider

Modifiers & state

align-left align-right align-center hover-mode with-arrow is-open

Events

ng:dropdown:open ng:dropdown:close

Reference

Generated from the component source (_ng_dropdown.scss · ng_dropdown.js).

Component info

Name	`dropdown`
Type	`css+js`
Version	`css 1.3.1 · js 1.2.0`
Status	`stable`
CSS	`/assets/css/components/_ng_dropdown.scss`
JS	`/assets/js/ng_dropdown.js`

Classes

.ng-dropdown .ng-dropdown-divider .ng-dropdown-menu .ng-dropdown-title .ng-dropdown-trigger

Tokens

--ng-dd-bg --ng-dd-border --ng-dd-color --ng-dd-divider-color --ng-dd-item-font-size --ng-dd-item-hover-bg --ng-dd-item-hover-color --ng-dd-item-padding-x --ng-dd-item-padding-y --ng-dd-min-width --ng-dd-offset --ng-dd-transition-speed --ng-dd-translate-y

Events

ng:dropdown:close ng:dropdown:open