Skip to content
Cimpress UI

App header API

Usage guidelinesAPI

Import

Section titled “Import”
import { AppHeader, SimpleAuthTool } from '@cimpress-ui/react';

Accessibility notes

Section titled “Accessibility notes”

AppHeader is designed to be a banner landmark. Make sure that app header is a direct descendant of your application’s <body> element.

Header tools

Section titled “Header tools”

AppHeader can render custom components (“tools”) provided in the tools prop. Tools allow the app header to be extensible, which in turn gives more freedom to various domains and teams that may have different needs.

API reference

Section titled “API reference”

AppHeader

Section titled “AppHeader”

Displays a basic application header.

See app header usage guidelines.

ref
Section titled “ ref ”
Ref<HTMLDivElement>

The ref type for this component.

AppHeaderProps
title *
Section titled “ title * ”
string

The title displayed in the header, usually the application name. Rendered as an <h1> element.

Section titled “ titleLink * ”
string | AppHeaderTitleLinkProps

The props of the link that is rendered around the header title.

tools
Section titled “ tools ”
ReactNode

The tools to render at the end of the header.

UNSTABLE_navButton
Section titled “ UNSTABLE_navButton ”
ReactNode
UNSTABLE_postTitle
Section titled “ UNSTABLE_postTitle ”
ReactNode
Section titled “ UNSTABLE_search ”
ReactNode
id
Section titled “ id ”
string

The element's unique identifier. See MDN.

data-cim-style-root
Section titled “ data-cim-style-root ”
boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className
Section titled “ UNSAFE_className ”
string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style
Section titled “ UNSAFE_style ”
CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

SimpleAuthTool

Section titled “SimpleAuthTool”

A header tool for simple authentication.

SimpleAuthToolProps
onLoginRequested *
Section titled “ onLoginRequested * ”
() => void

A function called when the user requests to log in.

onLogoutRequested *
Section titled “ onLogoutRequested * ”
() => void

A function called when the user requests to log out.

profile
Section titled “ profile ”
SimpleAuthProfile

The profile data of the currently logged in user.

accountName
Section titled “ accountName ”
string

The name of the account associated with the user.