Overview
Navigation Logo is an interactive element that allows a user to identify their current application context.
Navigation Logo is designed to work within the Navigation component. Use the heading and description properties to provide a contextual landmark to the users of your application or experience.
Usage
- To display the logo and name of your application.
- With the
activeproperty to represent that a user is at the "root" of an experience. - For interactive maps and demonstrations, to display the title and a description of the experience.
Sample
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. |
Enter | If the component has an href property, will open the specified URL destination. |
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| active | active | When true, the component is highlighted. | boolean | false |
| description | description | Specifies a description for the component. Displays below the heading. | string | |
| heading | heading | Specifies the component's heading text. | string | |
| headingLevel | heading-level | Specifies the heading level number of the component's heading for proper document structure, without affecting visual styling. | HeadingLevel | |
| href | href | Specifies the URL destination of the component, which can be set as an absolute or relative path. | string | |
| icon | icon | Specifies an icon to display. | IconName | |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| label | label | Specifies an accessible label for the component. | string | |
| rel | rel | Defines the relationship between the href value and the current document. | string | |
| target | target | Specifies where to open the linked document defined in the href property. | string | |
| thumbnail | thumbnail | Specifies the src to an image. | string |
Styles
| Name | Description |
|---|---|
| --calcite-navigation-accent-color | When active, specifies the component's border color. |
| --calcite-navigation-background-color | Specifies the component's background color. |
| --calcite-navigation-logo-heading-text-color | Specifies the component's heading text color. |
| --calcite-navigation-logo-text-color | Specifies the component's description text color. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<this> |
| setFocus | Sets focus on the component. | setFocus(options?: FocusOptions): Promise<void> |