App Header

A consistently available top-level element of the application interface. It contains a brand logo, application title and app-wide utility actions.

Use Nav Bar component or Sidebar Navigation component to organize the primary navigation experience.

Import#

import { AppHeader } from '@volue/wave-react';

App Header is a compound component that consists of multiple parts:

AppHeader.Root: The main wrapper that contains the header.
AppHeader.Logo: The logo of the application. It can be a wordmark or an icon.
AppHeader.Title: The title of the application.
AppHeader.Status: A container that displays current status or state of the application.
AppHeader.ActionList: The wrapper that contains all the items of the action list.
AppHeader.ActionListItem: The single item that represents one element of the action list.
AppHeader.ActionListPopoverContent: A special component to compose with Popover.Content when rendering a nested, stacked AppHeader.ActionList.
AppHeader.ActionListChevronIcon: A visual indicator that a list item contains a nested AppHeader.ActionList.

Examples#

Default#

AppHeader should be globally persistent and include a brand logo or mark followed by the application name in text form.

It can be used to surface certain application-wide actions and other non-primary navigation items. Common use cases include user account menu, link to user documentation or help guide, notification list trigger, settings or configuration link etc.

Use App Frame component to provide basic structure and host AppHeader inside AppFrame.AppHeader as in the example below.

With status information#

AppHeader.Status is a container that can be used to display current status or state to the user (e.g., real-time connection status). Use Hint Dot component to indicate the status visually.

Sizes#

AppHeader comes in two sizes: small and medium. The default size is medium.

Logo#

AppHeader.Logo can be an icon or wordmark.

Actions#

Use AppHeader.ActionList as a container for one or more AppHeader.ActionListItem components to configure application header actions.

By passing the startElement prop, you can add icon to each action for clarity. You may also choose to display icon-only items and wrap them with Tooltip.

Responsive header#

For small viewport experiences, you can reduce the main AppHeader.ActionList to a toggle item that opens Popover containing a vertically oriented AppHeader.ActionList that displays the full action list.

App Header exposes AppHeader.ActionListPopoverContent to compose with Popover.Content and AppHeader.ActionListChevronIcon to visually indicate items with nested action lists.

Hidden utility is used to control the presence of both mobile and desktop navigation experiences based on specified breakpoints.

You may also save space by using AppHeader.Logo in a compact icon variant.

See complete example in Storybook

With routing#

AppHeader.ActionListItem can be rendered as a tag or a custom Link component, making the integration with routing package such as React Router easy.

See Sidebar Navigation with React Router for a detailed guide

API Reference#

AppHeader.Root#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`size`	`enum`	`"medium"`

AppHeader.Logo#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`label`	`string`	No default value
`variant`	`enum`	`"wordmark"`

AppHeader.Title#

Prop	Type	Default
`as`	`enum`	`h1`
`css`	`StitchesCss`	No default value

AppHeader.Status#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value

AppHeader.ActionList#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`size`	`enum`	`"medium"`
`flow`	`enum`	`"row"`

AppHeader.ActionListItem#

Prop	Type	Default
`as`	`enum`	`button`
`css`	`StitchesCss`	No default value
`startElement`	`React.ReactElement`	No default value
`endElement`	`React.ReactElement`	No default value
`isActive`	`boolean`	`false`
`isDisabled`	`boolean`	`false`
`tone`	`enum`	No default value

AppHeader.ActionListPopoverContent#

Prop	Type	Default
`css`	`StitchesCss`	No default value

AppHeader.ActionListChevronIcon#

Prop	Type	Default
`css`	`StitchesCss`	No default value