upp-header

A reusable header bar component that provides a colored toolbar with an optional menu button, a title or custom content area, and action buttons. It integrates with viewService to automatically show the menu button on mobile viewports.

When to Use

Use upp-header at the top of panels, pages, or application sections where you need a consistent toolbar. It is typically placed inside upp-panel-header or directly within upp-application-main / upp-application-page. Combine it with upp-header-title for simple text headers, or upp-header-content for fully custom layouts.

Demo

Source Code

HTML

<h2>upp-header — Page Headers</h2>
<p class="demo-description">Different <code>upp-header</code> configurations as they'd appear across pages of a real application.</p>

<div class="demo-controls">
    <ion-button size="small" (click)="cycleColor()">Cycle color: {{ dynamicColor }}</ion-button>
</div>

<!-- Products page header -->
<div class="demo-section">
    <h3>Products page</h3>
    <upp-header color="primary" menu="show" height="50px">
        <upp-header-title>Products</upp-header-title>
        <upp-header-button>
            <ion-icon name="add-outline"></ion-icon>
        </upp-header-button>
        <upp-header-button>
            <ion-icon name="filter-outline"></ion-icon>
        </upp-header-button>
    </upp-header>
</div>

<!-- Order detail header -->
<div class="demo-section">
    <h3>Order detail</h3>
    <upp-header color="success" menu="hide" height="50px">
        <upp-header-title>Order #1234</upp-header-title>
        <upp-header-button>
            <ion-icon name="print-outline"></ion-icon>
        </upp-header-button>
    </upp-header>
</div>

<!-- Alert banner header -->
<div class="demo-section">
    <h3>Alert banner</h3>
    <upp-header color="danger" menu="hide" height="40px">
        <upp-header-content>
            <div class="alert-header-content">
                <ion-icon name="warning-outline"></ion-icon>
                <span>Connection lost — retrying in 5s</span>
            </div>
        </upp-header-content>
    </upp-header>
</div>

<!-- Minimal settings header -->
<div class="demo-section">
    <h3>Minimal header</h3>
    <upp-header color="medium" menu="hide" height="50px">
        <upp-header-title>Settings</upp-header-title>
    </upp-header>
</div>

<!-- Dynamic color header -->
<div class="demo-section">
    <h3>Dynamic color: {{ dynamicColor }}</h3>
    <upp-header [color]="dynamicColor" menu="show" height="50px">
        <upp-header-title>Dynamic Header</upp-header-title>
        <upp-header-button>
            <ion-icon name="ellipsis-vertical"></ion-icon>
        </upp-header-button>
    </upp-header>
</div>

TypeScript

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

@Component({
    selector: 'demo-upp-header',
    templateUrl: './demo-upp-header.html',
    styleUrls: ['../demo-common.scss', './demo-upp-header.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppHeaderComponent {
    dynamicColor = 'primary';
    colors = ['primary', 'success', 'warning', 'danger'];

    cycleColor() {
        const idx = this.colors.indexOf(this.dynamicColor);
        this.dynamicColor = this.colors[(idx + 1) % this.colors.length];
    }
}

SCSS

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

.alert-header-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;

    ion-icon {
        font-size: 18px;
    }
}

API Reference

upp-header

The main header bar component.

Property	Type	Default	Description
menu	'show' | 'hide'	'show'	Controls the menu button. When set to 'show', the menu button is visible on mobile viewports (determined by viewService.Mobile). When 'hide', the menu button is never shown.
color	string	'warning'	Sets the header background color. Accepts any Ionic color name (primary, secondary, success, warning, danger, etc.).
height	string	'50px'	Sets the header height as a CSS value.
lines	string | null	null	Sets the color of the bottom border. Pass an Ionic color name to show a colored border, or null to hide it.

upp-header-title

Renders text content as the header title, wrapped in an ion-label.

No inputs or outputs.

upp-header-button

Wraps projected content inside an ion-button to provide consistent styling for header action buttons.

Property	Type	Default	Description
size	'large' | 'small'	'large'	Controls the button size via a CSS class.

upp-header-content

A content-projection wrapper for fully custom header layouts. Use this instead of upp-header-title when you need complete control over the header content (e.g. icons, badges, custom markup).

No inputs or outputs.