Navigation Logo

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.

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

1
2
3
4
5
6
7
8
9
10
<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>
v3.0.0

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component.
EnterIf the component has an href property, will open the specified URL destination.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
activeactiveWhen true, the component is highlighted.booleanfalse
descriptiondescriptionA description for the component, which displays below the heading.string
headingheadingSpecifies heading text for the component, such as a product or organization name.string
headingLevelheading-levelSpecifies the heading level of the component's heading for proper document structure, without affecting visual styling.1 | 2 | 3 | 4 | 5 | 6
hrefhrefSpecifies the URL destination of the component, which can be set as an absolute or relative path.string
iconiconSpecifies an icon to display.string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
labellabelDescribes the appearance or function of the thumbnail. If no label is provided, context will not be provided to assistive technologies.string
relrelDefines the relationship between the href value and the current document.string
targettargetSpecifies where to open the linked document defined in the href property.string
thumbnailthumbnailSpecifies the src to an image.string

Styles

NameDescription
--calcite-navigation-accent-colorSpecifies the component's border color when active.
--calcite-navigation-background-colorSpecifies the component's background color.
--calcite-navigation-logo-heading-text-colorSpecifies the component's default color for heading text.
--calcite-navigation-logo-text-colorSpecifies the component's default color for icon and description text.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close