Navigation | Calcite Design System

Navigation and related components Navigation User and Navigation Logo provide a consistent location and structure for users to navigate your application or experience.

Overview

Use Navigation along with Navigation Logo, and when applicable, Navigation User, to provide landmarks to the user. Navigation can also be useful for containing a Menu and Menu Items.

Navigation is expected to be positioned within the header slot of the Shell component.

Sample

Usage

Serve as the primary method of navigating an application or experience.
Contain an application's information hierarchy within slotted Menu and Menu Items components.
Within the header slot of the Shell as a consistent location for interactive controls.

Accessibility

Key	Function
`Tab`	Moves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component.
`Tab` and `Shift`	Moves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component.

API reference

Properties

Property	Attribute	Description	Type	Default
label	label	When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`.	`string`
navigationAction	navigation-action	When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`

Slots

Name	Description
logo	A slot for adding a `calcite-logo` component to the primary navigation level.
user	A slot for adding a `calcite-user` component to the primary navigation level.
progress	A slot for adding a `calcite-progress` component to the primary navigation level.
navigation-action	A slot for adding a `calcite-action` component to the primary navigation level.
content-start	A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the start position of any navigation level.
content-center	A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the center position of the primary navigation level.
content-end	A slot for adding a `calcite-menu`, `calcite-action`, or other interactive elements in the end position of any navigation level.
navigation-secondary	A slot for adding a `calcite-navigation` component in the secondary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.
navigation-tertiary	A slot for adding a `calcite-navigation` component in the tertiary navigation level. Components rendered here will not display `calcite-navigation-logo` or `calcite-navigation-user` components.

Styles

Name	Description
--calcite-navigation-width	Specifies the width of the component's content area.
--calcite-navigation-background	deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-navigation-background-color` instead. Specifies the background color of the component.
--calcite-navigation-background-color	Specifies the component's background color.
--calcite-navigation-border-color	Specifies the component's border color.

Events

Name	Description	Behavior
calciteNavigationActionSelect	When `navigationAction` is `true`, emits when the displayed action selection changes.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	When `navigationAction` is `true`, sets focus on the component's action element.	`setFocus(options?: FocusOptions): Promise<void>`