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
headerslot of the Shell as a consistent location for interactive controls.
Accessibility
Keyboard navigation
| 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 |
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 | --calcite-navigation-background-color. 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. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once 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> |