Header Nav List

A list of actions or utility navigation items within the application header.

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

Import#

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

Header Nav List is a compound component that consists of multiple parts:

HeaderNavList.Root: The wrapper that contains all the items of the nav list.
HeaderNavList.Item: The single item that represents one element of the nav list.
HeaderNavList.PopoverContent: A special component to compose with Popover.Content when rendering a nested, stacked HeaderNavList.
HeaderNavList.ChevronIcon: A visual indicator that a navigation item contains a nested HeaderNavList

Examples#

Default#

HeaderNavList can be used complementarily to the Nav Bar pattern to display certain actions and other non-primary navigation items in the header of an application. 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 HeaderNavList inside AppFrame.Header as in the example below.

Item variations#

Use HeaderNavList.Item to configure nav list items.

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

To indicate that item(s) can't be interacted with use isDisabled prop.

Item with nested nav list#

Example below shows the possibility to attach a nested, stacked HeaderNavList to an item with help of Popover Component.

Header Nav List exposes HeaderNavList.PopoverContent to compose with Popover.Content and HeaderNavList.ChevronIcon to visually indicate items with nested nav lists.

Make sure to properly label your nested HeaderNavList with an aria-label to provide context about the nested navigation.

Mobile version#

On small screens, you can reduce the main HeaderNavList to a toggle item that opens Popover with full navigation list laid out vertically.

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

See complete example in Storybook

With routing#

HeaderNavList.Item 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#

HeaderNavList.Root#

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

HeaderNavList.Item#

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

HeaderNavList.PopoverContent#

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

HeaderNavList.ChevronIcon#

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