Header Bar

The header bar provides a consistent, high-level control surface for the application. It features a logo that reinforces brand identity, navigation items for accessing primary sections, and an action bar that contains important tools and utilities.

import {HeaderBarModule} from "@qualcomm-ui/angular/header-bar"

Examples

Responsive Design

These examples use Tailwind container queries for mobile-first responsiveness. Tailwind is installed on our documentation sites only, and is not required to use any of our components.

Basic Usage

A typical header bar includes a logo, application title, nav items, and an action bar.

Brand

Qualcomm AI Visualizer

<div class="@container" q-header-bar-root>
  <div q-header-bar-logo>
    <div class="bg-category-1-subtle rounded-sm p-0.5">
      <svg qIcon="Layers2" size="lg"></svg>
    </div>
    <div q-header-bar-app-title>Qualcomm AI Visualizer</div>
  </div>

  <div q-header-bar-divider></div>

  <nav class="hidden @min-[580px]:flex" q-header-bar-nav>
    <button q-header-bar-nav-item>Home</button>
    <button q-header-bar-nav-item>
      <svg qIcon="Settings"></svg>
      Settings
    </button>
  </nav>

  <div class="hidden @min-[285px]:flex" q-header-bar-action-bar>
    <button icon="Moon" q-header-bar-action-icon-button></button>
    <button icon="Settings" q-header-bar-action-icon-button></button>
    <button
      class="hidden @min-[450px]:inline-flex"
      q-header-bar-action-button
      startIcon="LayoutGrid"
    >
      Apps
    </button>

    <div class="hidden @min-[375px]:block" q-header-bar-divider></div>

    <div
      class="hidden @min-[375px]:flex"
      q-avatar
      size="xs"
      variant="contrast"
    >
      <div q-avatar-content>JD</div>
    </div>
  </div>
</div>

Sizes

The header bar has two sizes: sm (default) and lg. The size input governs padding, element spacing, and height.

Brand

Qualcomm AI Visualizer

import {NgTemplateOutlet} from "@angular/common"
import {Component} from "@angular/core"
import {Layers2, LayoutGrid, Moon, Settings} from "lucide-angular"

import {AvatarModule} from "@qualcomm-ui/angular/avatar"
import {HeaderBarModule} from "@qualcomm-ui/angular/header-bar"
import {IconDirective} from "@qualcomm-ui/angular/icon"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"

@Component({
  imports: [HeaderBarModule, AvatarModule, IconDirective, NgTemplateOutlet],
  providers: [provideIcons({Layers2, LayoutGrid, Moon, Settings})],
  selector: "header-bar-sizes-demo",
  template: `
    <div class="flex w-full flex-col gap-4">
      <ng-container *ngTemplateOutlet="headerBar" />
      <ng-container *ngTemplateOutlet="headerBar; context: {size: 'lg'}" />
    </div>

    <ng-template #headerBar let-size="size">
      <div class="@container" q-header-bar-root [size]="size">
        <div q-header-bar-logo>
          <div class="bg-category-1-subtle rounded-sm p-0.5">
            <svg qIcon="Layers2" size="lg"></svg>
          </div>
          <div q-header-bar-app-title>Qualcomm AI Visualizer</div>
        </div>

        <div q-header-bar-divider></div>

        <nav class="hidden @min-[580px]:flex" q-header-bar-nav>
          <button q-header-bar-nav-item>Home</button>
          <button q-header-bar-nav-item>
            <svg qIcon="Settings"></svg>
            Settings
          </button>
        </nav>

        <div class="hidden @min-[285px]:flex" q-header-bar-action-bar>
          <button icon="Moon" q-header-bar-action-icon-button></button>
          <button icon="Settings" q-header-bar-action-icon-button></button>
          <button
            class="hidden @min-[450px]:inline-flex"
            q-header-bar-action-button
            startIcon="LayoutGrid"
          >
            Apps
          </button>

          <div class="hidden @min-[375px]:block" q-header-bar-divider></div>

          <div
            class="hidden @min-[375px]:flex"
            q-avatar
            size="xs"
            variant="contrast"
          >
            <div q-avatar-content>JD</div>
          </div>
        </div>
      </div>
    </ng-template>
  `,
})
export class HeaderBarSizesDemo {}

Surfaces

Use the surface input to set the background color. Available options are primary (default) and secondary.

Brand

Qualcomm AI Visualizer

import {NgTemplateOutlet} from "@angular/common"
import {Component} from "@angular/core"
import {Layers2, LayoutGrid, Moon, Settings} from "lucide-angular"

import {AvatarModule} from "@qualcomm-ui/angular/avatar"
import {HeaderBarModule} from "@qualcomm-ui/angular/header-bar"
import {IconDirective} from "@qualcomm-ui/angular/icon"
import {provideIcons} from "@qualcomm-ui/angular-core/lucide"

@Component({
  imports: [HeaderBarModule, AvatarModule, IconDirective, NgTemplateOutlet],
  providers: [provideIcons({Layers2, LayoutGrid, Moon, Settings})],
  selector: "header-bar-surfaces-demo",
  template: `
    <div class="flex w-full flex-col gap-4">
      <ng-container *ngTemplateOutlet="headerBar" />
      <ng-container
        *ngTemplateOutlet="headerBar; context: {surface: 'secondary'}"
      />
    </div>

    <ng-template #headerBar let-surface="surface">
      <div class="@container" q-header-bar-root [surface]="surface">
        <div q-header-bar-logo>
          <div class="bg-category-1-subtle rounded-sm p-0.5">
            <svg qIcon="Layers2" size="lg"></svg>
          </div>
          <div q-header-bar-app-title>Qualcomm AI Visualizer</div>
        </div>

        <div q-header-bar-divider></div>

        <nav class="hidden @min-[580px]:flex" q-header-bar-nav>
          <button q-header-bar-nav-item>Home</button>
          <button q-header-bar-nav-item>
            <svg qIcon="Settings"></svg>
            Settings
          </button>
        </nav>

        <div class="hidden @min-[285px]:flex" q-header-bar-action-bar>
          <button icon="Moon" q-header-bar-action-icon-button></button>
          <button icon="Settings" q-header-bar-action-icon-button></button>
          <button
            class="hidden @min-[450px]:inline-flex"
            q-header-bar-action-button
            startIcon="LayoutGrid"
          >
            Apps
          </button>

          <div class="hidden @min-[375px]:block" q-header-bar-divider></div>

          <div
            class="hidden @min-[375px]:flex"
            q-avatar
            size="xs"
            variant="contrast"
          >
            <div q-avatar-content>JD</div>
          </div>
        </div>
      </div>
    </ng-template>
  `,
})
export class HeaderBarSurfacesDemo {}

Render a menu nav item with the q-header-bar-menu-item and q-menu-trigger directives. This component must be wrapped in a q-menu.

Brand

Qualcomm AI Visualizer

<div q-header-bar-root>
  <div q-header-bar-logo>
    <div class="bg-category-1-subtle rounded-sm p-0.5">
      <svg qIcon="Layers2" size="lg"></svg>
    </div>
    <div q-header-bar-app-title>Qualcomm AI Visualizer</div>
  </div>

  <div q-header-bar-divider></div>

  <nav q-header-bar-nav>
    <button q-header-bar-nav-item>Home</button>

    <q-menu>
      <button q-header-bar-menu-item q-menu-trigger>Menu Item</button>
      <q-portal>
        <div q-menu-positioner>
          <div q-menu-content>
            <button q-menu-item value="menu-item-1">
              <div icon="AArrowDown" q-menu-item-start-icon></div>
              <div q-menu-item-label>Menu Item 1</div>
            </button>
            <button q-menu-item value="menu-item-2">
              <div icon="AArrowDown" q-menu-item-start-icon></div>
              <div q-menu-item-label>Menu Item 2</div>
            </button>
            <button q-menu-item value="menu-item-3">
              <div icon="AArrowDown" q-menu-item-start-icon></div>
              <div q-menu-item-label>Menu Item 3</div>
            </button>
          </div>
        </div>
      </q-portal>
    </q-menu>
  </nav>
</div>

API

q-header-bar-root

Prop	Type	Default
size The size of the component and its elements. Governs padding, element spacing, and height.	'sm' \| 'lg'	'sm'
surface The background color of the component.	\| 'primary' \| 'secondary'

size

Type

'sm' | 'lg'

Description

The size of the component and its elements. Governs padding, element spacing, and height.

surface

Type

| 'primary'
| 'secondary'

Description

The background color of the component.

Attribute / Property	Value
`class`	'qui-header-bar__root'
`data-size`	'sm' \| 'lg'
`data-surface`	\| 'primary' \| 'secondary'

class

Value

'qui-header-bar__root'

data-size

Value

'sm' | 'lg'

data-surface

Value

| 'primary'
| 'secondary'

q-header-bar-action-bar

Attribute / Property	Value
`class`	'qui-header-bar__action-bar'

q-header-bar-action-button

Prop	Type
endIcon lucide-angular icon, positioned after the label.	\| LucideIconData \| string

startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

endIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label.

startIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned before the label.

q-header-bar-action-icon-button

Prop	Type
icon lucide-angular icon.	\| LucideIconData \| string

icon

Type

| LucideIconData
| string

Description

lucide-angular icon.

Attribute / Property	Value
`class`	'qui-header-bar__app-title'

Attribute / Property	Value
`class`	'qui-header-bar__divider'

Attribute / Property	Value
`class`	'qui-header-bar__logo'

Prop	Type
icon lucide-angular icon.	\| LucideIconData \| string

icon

Type

| LucideIconData
| string

Description

lucide-angular icon.

q-header-bar-nav-item

Prop	Type
active Whether the nav item is the current active route.	boolean
endIcon Lucide icon rendered after the item label.	\| LucideIconData \| string
startIcon Lucide icon rendered before the item label.	\| LucideIconData \| string