Header Nav List

A list of navigation items to display in the app header.

Consider using Sidebar Navigation component to organize primary navigation experience.

Import#

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

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

HeaderNavList: 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 as an alternative to the Sidebar Navigation pattern to display the primary navigation and/or important actions in the header of an application.

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.

isActive prop is used to mark currently active item. 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#

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