QUI React2.6.3

Header

The Header provides a container for the logo, title, top-level navigation and access to app controls.

import {QHeader} from "@qui/react"

Overview

QUI exports 6 components to help you build headers:

  • QHeader: the root component.
  • QHeaderLogo: layout component that wraps the header's logo and title.
  • QHeaderTitle: the header's primary message, typically the title of your application.
  • QHeaderNav: layout component that wraps the header's nav items.
  • QHeaderNavItem: individual nav links and menus.
  • QHeaderActions: layout component that wrap's the header's right-hand actions.

Examples

Showcase

Qualcomm Device Cloud
Qualcomm Device Cloud

Colors

Use the color input to render one of the three background colors available - primary, contrast, or gunmetal.

primary
Qualcomm Device Cloud
Qualcomm Device Cloud
contrast
Qualcomm Device Cloud
Qualcomm Device Cloud
gunmetal
Qualcomm Device Cloud
Qualcomm Device Cloud

Customization

Everything in the header is customizable. Mix and match with our existing components to suit your needs.

QUI Components Logo
QUI Components

API

QHeader

Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'header'
className
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
string
style
The style global attribute contains CSS styling declarations to be applied to the element.
CSSProperties
Type
| ElementType
| ComponentType
Default
'header'
Description
The component used for the root node. It can be a React component or element.
Type
string
Description
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Type
CSSProperties
Description
The style global attribute contains CSS styling declarations to be applied to the element.
Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
children
React children prop.
ReactNode
className
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
string
style
The style global attribute contains CSS styling declarations to be applied to the element.
CSSProperties
Type
| ElementType
| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or element.
Type
ReactNode
Description
React children prop.
Type
string
Description
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Type
CSSProperties
Description
The style global attribute contains CSS styling declarations to be applied to the element.

QHeaderTitle

Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
children
React children prop.
ReactNode
className
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
string
style
The style global attribute contains CSS styling declarations to be applied to the element.
CSSProperties
Type
| ElementType
| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or element.
Type
ReactNode
Description
React children prop.
Type
string
Description
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Type
CSSProperties
Description
The style global attribute contains CSS styling declarations to be applied to the element.

QHeaderNav

Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'nav'
children
React children prop.
ReactNode
className
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
string
style
The style global attribute contains CSS styling declarations to be applied to the element.
CSSProperties
Type
| ElementType
| ComponentType
Default
'nav'
Description
The component used for the root node. It can be a React component or element.
Type
ReactNode
Description
React children prop.
Type
string
Description
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Type
CSSProperties
Description
The style global attribute contains CSS styling declarations to be applied to the element.

QHeaderNavItem

Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'button'
className
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
string
endIcon
Icon; positioned after the children.
| LucideIcon
| ReactNode
startIcon
Icon; positioned before the children.
| LucideIcon
| ReactNode
style
The style global attribute contains CSS styling declarations to be applied to the element.
CSSProperties
Type
| ElementType
| ComponentType
Default
'button'
Description
The component used for the root node. It can be a React component or element.
Type
string
Description
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Type
| LucideIcon
| ReactNode
Description
Icon; positioned after the children.
Type
| LucideIcon
| ReactNode
Description
Icon; positioned before the children.
Type
CSSProperties
Description
The style global attribute contains CSS styling declarations to be applied to the element.

QHeaderActions

Name & DescriptionOption(s)Default
as
The component used for the root node. It can be a React component or element.
| ElementType
| ComponentType
'div'
children
React children prop.
ReactNode
className
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
string
style
The style global attribute contains CSS styling declarations to be applied to the element.
CSSProperties
Type
| ElementType
| ComponentType
Default
'div'
Description
The component used for the root node. It can be a React component or element.
Type
ReactNode
Description
React children prop.
Type
string
Description
The className property of the Element interface gets and sets the value of the class attribute of the specified element.
Type
CSSProperties
Description
The style global attribute contains CSS styling declarations to be applied to the element.
Previous
Divider
Next
Icon
Overview
Examples
Showcase
Colors
Customization
API
QHeader
QHeaderLogo
QHeaderTitle
QHeaderNav
QHeaderNavItem
QHeaderActions
Copyright © 2025 QUALCOMM incorporated. All rights reserved. This site is built using QUI Docs. Head over to the template repository to start building.