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
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.
Sample
<calcite-shell>
<calcite-navigation slot="header">
<calcite-navigation-logo slot="logo" heading="A view of the estuary"
description="20 years of change where the river meets the sea"></calcite-navigation-logo>
<calcite-menu slot="content-end">
<calcite-menu-item text="Map" icon="book" text-enabled></calcite-menu-item>
<calcite-menu-item text-enabled text="About"></calcite-menu-item>
</calcite-menu>
</calcite-navigation>
</calcite-shell>
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> |