Getting Started
Installation
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
Overview
Buttons
ButtonButton GroupIcon ButtonInline Icon Button
Form Controls
CheckboxComboboxNumber InputPassword InputRadioSelectSliderSwitchText AreaText Input
Data Display
AvatarDividerHeader BarIconLinkSegmented ControlTableTag
Overlays
DialogDrawerMenuPopoverTooltip
Disclosure
AccordionBreadcrumbsCollapsiblePaginationSide NavTabsTree
Feedback
Inline NotificationProgressProgress RingToast Notification

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 {HeaderBar} from "@qualcomm-ui/react/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.

import type {ReactElement} from "react"

import {Layers2, LayoutGrid, Moon, Settings} from "lucide-react"

import {Avatar} from "@qualcomm-ui/react/avatar"
import {HeaderBar} from "@qualcomm-ui/react/header-bar"
import {Icon} from "@qualcomm-ui/react/icon"

export function HeaderBarShowcaseDemo(): ReactElement {
  return (
    <HeaderBar.Root className="@container">
      <HeaderBar.Logo>
        <div className="bg-category-1-subtle rounded-sm p-0.5">
          <Icon icon={Layers2} size="lg" />
        </div>
        <HeaderBar.AppTitle>Qualcomm AI Visualizer</HeaderBar.AppTitle>
      </HeaderBar.Logo>

      <HeaderBar.Divider />

      <HeaderBar.Nav className="hidden @min-[580px]:flex">
        <HeaderBar.NavItem>Home</HeaderBar.NavItem>

        <HeaderBar.NavItem>
          <Icon icon={Settings} />
          Settings
        </HeaderBar.NavItem>
      </HeaderBar.Nav>

      <HeaderBar.ActionBar className="hidden @min-[285px]:flex">
        <HeaderBar.ActionIconButton icon={Moon} />
        <HeaderBar.ActionIconButton icon={Settings} />
        <HeaderBar.ActionButton
          className="hidden @min-[450px]:inline-flex"
          startIcon={LayoutGrid}
        >
          Apps
        </HeaderBar.ActionButton>

        <HeaderBar.Divider className="hidden @min-[375px]:block" />

        <Avatar.Root
          className="hidden @min-[375px]:flex"
          size="xs"
          variant="contrast"
        >
          <Avatar.Content>JD</Avatar.Content>
        </Avatar.Root>
      </HeaderBar.ActionBar>
    </HeaderBar.Root>
  )
}

Sizes

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

import type {ReactElement} from "react"

import {Layers2, LayoutGrid, Moon, Settings} from "lucide-react"

import {Avatar} from "@qualcomm-ui/react/avatar"
import {HeaderBar} from "@qualcomm-ui/react/header-bar"
import {Icon} from "@qualcomm-ui/react/icon"

export function HeaderBarSizesDemo(): ReactElement {
  return (
    <div className="flex w-full flex-col gap-4">
      <HeaderBar.Root className="@container">
        <HeaderContent />
      </HeaderBar.Root>

      <HeaderBar.Root className="@container" size="lg">
        <HeaderContent />
      </HeaderBar.Root>
    </div>
  )
}

function HeaderContent() {
  return (
    <>
      <HeaderBar.Logo>
        <div className="bg-category-1-subtle rounded-sm p-0.5">
          <Icon icon={Layers2} size="lg" />
        </div>
        <HeaderBar.AppTitle>Qualcomm AI Visualizer</HeaderBar.AppTitle>
      </HeaderBar.Logo>

      <HeaderBar.Divider />

      <HeaderBar.Nav className="hidden @min-[580px]:flex">
        <HeaderBar.NavItem>Home</HeaderBar.NavItem>

        <HeaderBar.NavItem>
          <Icon icon={Settings} />
          Settings
        </HeaderBar.NavItem>
      </HeaderBar.Nav>

      <HeaderBar.ActionBar className="hidden @min-[285px]:flex">
        <HeaderBar.ActionIconButton icon={Moon} />
        <HeaderBar.ActionIconButton icon={Settings} />
        <HeaderBar.ActionButton
          className="hidden @min-[450px]:inline-flex"
          startIcon={LayoutGrid}
        >
          Apps
        </HeaderBar.ActionButton>

        <HeaderBar.Divider className="hidden @min-[375px]:block" />

        <Avatar.Root
          className="hidden @min-[375px]:flex"
          size="xs"
          variant="contrast"
        >
          <Avatar.Content>JD</Avatar.Content>
        </Avatar.Root>
      </HeaderBar.ActionBar>
    </>
  )
}

Surfaces

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

import type {ReactElement} from "react"

import {Layers2, LayoutGrid, Moon, Settings} from "lucide-react"

import {Avatar} from "@qualcomm-ui/react/avatar"
import {HeaderBar} from "@qualcomm-ui/react/header-bar"
import {Icon} from "@qualcomm-ui/react/icon"

export function HeaderBarSurfacesDemo(): ReactElement {
  return (
    <div className="flex w-full flex-col gap-4">
      <HeaderBar.Root className="@container">
        <HeaderContent />
      </HeaderBar.Root>

      <HeaderBar.Root className="@container" surface="secondary">
        <HeaderContent />
      </HeaderBar.Root>
    </div>
  )
}

function HeaderContent() {
  return (
    <>
      <HeaderBar.Logo>
        <div className="bg-category-1-subtle rounded-sm p-0.5">
          <Icon icon={Layers2} size="lg" />
        </div>
        <HeaderBar.AppTitle>Qualcomm AI Visualizer</HeaderBar.AppTitle>
      </HeaderBar.Logo>

      <HeaderBar.Divider />

      <HeaderBar.Nav className="hidden @min-[580px]:flex">
        <HeaderBar.NavItem>Home</HeaderBar.NavItem>

        <HeaderBar.NavItem>
          <Icon icon={Settings} />
          Settings
        </HeaderBar.NavItem>
      </HeaderBar.Nav>

      <HeaderBar.ActionBar className="hidden @min-[285px]:flex">
        <HeaderBar.ActionIconButton icon={Moon} />
        <HeaderBar.ActionIconButton icon={Settings} />
        <HeaderBar.ActionButton
          className="hidden @min-[450px]:inline-flex"
          startIcon={LayoutGrid}
        >
          Apps
        </HeaderBar.ActionButton>

        <HeaderBar.Divider className="hidden @min-[375px]:block" />

        <Avatar.Root
          className="hidden @min-[375px]:flex"
          size="xs"
          variant="contrast"
        >
          <Avatar.Content>JD</Avatar.Content>
        </Avatar.Root>
      </HeaderBar.ActionBar>
    </>
  )
}

Render a menu nav item with the HeaderBar.MenuItem component. This component must be wrapped in a Menu.

import {AArrowDownIcon, Layers2} from "lucide-react"

import {HeaderBar} from "@qualcomm-ui/react/header-bar"
import {Icon} from "@qualcomm-ui/react/icon"
import {Menu} from "@qualcomm-ui/react/menu"
import {Portal} from "@qualcomm-ui/react-core/portal"

export function HeaderBarMenuItemDemo() {
  return (
    <HeaderBar.Root>
      <HeaderBar.Logo>
        <div className="bg-category-1-subtle rounded-sm p-0.5">
          <Icon icon={Layers2} size="lg" />
        </div>
        <HeaderBar.AppTitle>Qualcomm AI Visualizer</HeaderBar.AppTitle>
      </HeaderBar.Logo>

      <HeaderBar.Divider />

      <HeaderBar.Nav>
        <HeaderBar.NavItem>Home</HeaderBar.NavItem>

        <Menu.Root>
          <Menu.Trigger>
            <HeaderBar.MenuItem>Menu Item</HeaderBar.MenuItem>
          </Menu.Trigger>
          <Portal>
            <Menu.Positioner>
              <Menu.Content>
                {["Menu Item 1", "Menu Item 2", "Menu Item 3"].map((entry) => (
                  <Menu.Item key={entry} value={entry}>
                    <Menu.ItemStartIcon icon={AArrowDownIcon} />
                    <Menu.ItemLabel>{entry}</Menu.ItemLabel>
                  </Menu.Item>
                ))}
              </Menu.Content>
            </Menu.Positioner>
          </Portal>
        </Menu.Root>
      </HeaderBar.Nav>
    </HeaderBar.Root>
  )
}

API

<HeaderBar.Root>

PropTypeDefault
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
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'
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
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.

<HeaderBar.ActionBar>

PropType
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more

<HeaderBar.ActionButton>

PropType
endIcon
Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
| LucideIcon
| ReactNode
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
startIcon
Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
| LucideIcon
| ReactNode
endIcon
Type
| LucideIcon
| ReactNode
Description
Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
startIcon
Type
| LucideIcon
| ReactNode
Description
Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

<HeaderBar.ActionIconButton>

PropType
icon
*
lucide-react icon. Can be supplied as a ReactElement for additional customization.
| LucideIcon
| ReactNode
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
icon
*
Type
| LucideIcon
| ReactNode
Description
lucide-react icon. Can be supplied as a ReactElement for additional customization.
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more

<HeaderBar.AppTitle>

PropType
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more

<HeaderBar.Divider>

PropType
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
PropType
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more

<HeaderBar.MenuItem>

PropType
icon
lucide-react icon. Can be supplied as a ReactElement for additional customization.
| LucideIcon
| ReactNode
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
icon
Type
| LucideIcon
| ReactNode
Description
lucide-react icon. Can be supplied as a ReactElement for additional customization.
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more

<HeaderBar.NavItem>

PropType
active
Whether the nav item is the current active route.
boolean
endIcon
Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
| LucideIcon
| ReactNode
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
startIcon
Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
| LucideIcon
| ReactNode
active
Type
boolean
Description
Whether the nav item is the current active route.
endIcon
Type
| LucideIcon
| ReactNode
Description
Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
startIcon
Type
| LucideIcon
| ReactNode
Description
Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

<HeaderBar.Nav>

PropType
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more

<HeaderBar.WindowControls>

PropType
render
Allows you to replace the component's HTML element with a different tag or component. Learn more
| ReactElement
| ((
    props: object,
  ) => ReactElement)
render
Type
| ReactElement
| ((
    props: object,
  ) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Divider
Icon
Examples
Basic Usage
Sizes
Surfaces
Menu Items
API
<HeaderBar.Root>
<HeaderBar.ActionBar>
<HeaderBar.ActionButton>
<HeaderBar.ActionIconButton>
<HeaderBar.AppTitle>
<HeaderBar.Divider>
<HeaderBar.Logo>
<HeaderBar.MenuItem>
<HeaderBar.NavItem>
<HeaderBar.Nav>
<HeaderBar.WindowControls>
Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.