upp-dropdown

A dropdown menu component that displays floating content anchored to a parent element. It supports a title section, multiple content sections, and visual separators between groups. The dropdown is controlled programmatically via the expand input and emits a Closed event when dismissed.

When to Use

Use upp-dropdown for contextual action menus, option lists, or any floating content that should appear on demand relative to a trigger button. It works well for "more options" patterns, quick-action menus, and compact selection lists.

Demo

Source Code

HTML

<h2>upp-dropdown — Actions Menu</h2>
<p class="demo-description">Dropdown menus anchored to buttons, showing contextual actions and sort options using <code>upp-dropdown</code>.</p>

<div class="dropdown-row">
    <!-- Actions dropdown -->
    <div class="demo-section dropdown-section">
        <h3>Item actions</h3>
        <div class="dropdown-anchor">
            <ion-button (click)="toggleActions()">
                <ion-icon name="ellipsis-horizontal" slot="start"></ion-icon>
                More Options
            </ion-button>
            <upp-dropdown [expand]="actionsOpen" (Closed)="onActionsClosed()">
                <upp-dropdown-title>Actions</upp-dropdown-title>
                <upp-dropdown-content>
                    <ion-list>
                        <ion-item button lines="none">
                            <ion-icon name="create-outline" slot="start"></ion-icon>
                            <ion-label>Edit</ion-label>
                        </ion-item>
                        <ion-item button lines="none">
                            <ion-icon name="copy-outline" slot="start"></ion-icon>
                            <ion-label>Duplicate</ion-label>
                        </ion-item>
                        <ion-item button lines="none">
                            <ion-icon name="share-outline" slot="start"></ion-icon>
                            <ion-label>Share</ion-label>
                        </ion-item>
                    </ion-list>
                </upp-dropdown-content>
                <upp-dropdown-separate></upp-dropdown-separate>
                <upp-dropdown-content>
                    <ion-list>
                        <ion-item button lines="none">
                            <ion-icon name="trash-outline" slot="start" color="danger"></ion-icon>
                            <ion-label color="danger">Delete</ion-label>
                        </ion-item>
                    </ion-list>
                </upp-dropdown-content>
            </upp-dropdown>
        </div>
    </div>

    <!-- Sort dropdown -->
    <div class="demo-section dropdown-section">
        <h3>Sort options</h3>
        <div class="dropdown-anchor">
            <ion-button color="secondary" (click)="toggleSort()">
                <ion-icon name="swap-vertical-outline" slot="start"></ion-icon>
                Sort By
            </ion-button>
            <upp-dropdown [expand]="sortOpen" (Closed)="onSortClosed()">
                <upp-dropdown-title>Sort By</upp-dropdown-title>
                <upp-dropdown-content>
                    <ion-list>
                        <ion-item button lines="none">
                            <ion-icon name="text-outline" slot="start"></ion-icon>
                            <ion-label>Name</ion-label>
                        </ion-item>
                        <ion-item button lines="none">
                            <ion-icon name="calendar-outline" slot="start"></ion-icon>
                            <ion-label>Date</ion-label>
                        </ion-item>
                        <ion-item button lines="none">
                            <ion-icon name="pricetag-outline" slot="start"></ion-icon>
                            <ion-label>Price</ion-label>
                        </ion-item>
                    </ion-list>
                </upp-dropdown-content>
            </upp-dropdown>
        </div>
    </div>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'demo-upp-dropdown',
    templateUrl: './demo-upp-dropdown.html',
    styleUrls: ['../demo-common.scss', './demo-upp-dropdown.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppDropdownComponent {
    actionsOpen = false;
    sortOpen = false;

    toggleActions() {
        this.actionsOpen = !this.actionsOpen;
    }

    onActionsClosed() {
        this.actionsOpen = false;
    }

    toggleSort() {
        this.sortOpen = !this.sortOpen;
    }

    onSortClosed() {
        this.sortOpen = false;
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

.dropdown-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.dropdown-section {
    flex: 1;
    min-width: 0;
}

.dropdown-anchor {
    position: relative;
    display: inline-block;
    min-height: 240px;
}

API Reference

upp-dropdown

The main dropdown container. Place it inside a relatively positioned parent element so it renders as a floating overlay.

Property	Type	Default	Description
expand	boolean	false	Controls whether the dropdown is expanded (visible) or collapsed (hidden).

Event	Payload	Description
Closed	void	Emitted when the dropdown is dismissed (e.g. by clicking outside or calling OnCloseDropdown()).

upp-dropdown-title

Renders a title row at the top of the dropdown, wrapped in an ion-item and ion-label.

No inputs or outputs.

upp-dropdown-content

A content-projection wrapper for dropdown menu items. You can use multiple upp-dropdown-content blocks within a single dropdown to create grouped sections.

No inputs or outputs.

upp-dropdown-separate

Renders a horizontal separator line between content sections. Use it between upp-dropdown-content blocks to visually group related items.

No inputs or outputs.