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 | A description for the component, which displays below the heading. | string | |
| heading | heading | Specifies heading text for the component, such as a product or organization name. | string | |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | |
| 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. | string | |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | false |
| label | label | Describes the appearance or function of the thumbnail. If no label is provided, context will not be provided to assistive technologies. | 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 | Specifies the component's border color when active. |
| --calcite-navigation-background-color | Specifies the component's background color. |
| --calcite-navigation-logo-heading-text-color | Specifies the component's default color for heading text. |
| --calcite-navigation-logo-text-color | Specifies the component's default color for icon and description text. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
| setFocus | Sets focus on the component. | setFocus(): Promise<void> |