Header Bar

A header bar provides a consistent navigation and branding area at the top of an application. It contains the application logo, title, navigation links, and action controls.

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.

Brand

Qualcomm AI Visualizer

Sizes

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

Brand

Qualcomm AI Visualizer

Surfaces

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

Brand

Qualcomm AI Visualizer

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

Brand

Qualcomm AI Visualizer

API

<HeaderBar.Root>

Prop	Type	Default
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.

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

className

Value

'qui-header-bar__root'

data-size

Value

'sm' | 'lg'

data-surface

Value

| 'primary'
| 'secondary'

<HeaderBar.Logo>

Prop	Type
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

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

<HeaderBar.AppTitle>

Prop	Type
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

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

<HeaderBar.Nav>

Prop	Type
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

Attribute / Property	Value
`className`	'qui-header-bar__nav'

<HeaderBar.NavItem>

Prop	Type
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.

Attribute / Property	Value
`className`	'qui-header-bar__nav-item'
`data-active`

<HeaderBar.Divider>

Prop	Type
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

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

<HeaderBar.ActionBar>

Prop	Type
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

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

<HeaderBar.WindowControls>

Prop	Type
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

Attribute / Property	Value
`className`	'qui-header-bar__window-controls'

Divider

Icon