Navigation Logo | Calcite Design System

Child component of Navigation

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.

Sample

Usage

To display the logo and name of your application.
With the active property 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.

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.
`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	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`