Navigation

Navigation and related components Navigation User and Navigation Logo provide a consistent location and structure for users to navigate your application or experience.

Overview

Use Navigation along with Navigation Logo, and when applicable, Navigation User, to provide landmarks to the user. Navigation can also be useful for containing a Menu and Menu Items.

Navigation is expected to be positioned within the header slot of the Shell component.

Usage

  • Serve as the primary method of navigating an application or experience.
  • Contain an application's information hierarchy within slotted Menu and Menu Items components.
  • Within the header slot of the Shell as a consistent location for interactive controls.

Sample

3 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<calcite-shell>
    <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" heading="Snow Plow Map" description="City of AcmeCo">
        </calcite-navigation-logo>
        <calcite-menu slot="content-end">
            <calcite-menu-item text="Drivers" icon-start="license" text-enabled></calcite-menu-item>
            <calcite-menu-item active text="Routes" icon-start="road-sign" text-enabled></calcite-menu-item>
            <calcite-menu-item text="Forecast" icon-start="snow" text-enabled></calcite-menu-item>
        </calcite-menu>
        <calcite-navigation slot="navigation-secondary">
            <calcite-menu slot="content-start">
                <calcite-menu-item breadcrumb text="All Routes" icon-start="book" text-enabled></calcite-menu-item>
                <calcite-menu-item active text="South Hills" icon-start="apps" text-enabled></calcite-menu-item>
            </calcite-menu>
        </calcite-navigation>
        <calcite-navigation-user slot="user" full-name="Wendell Berry" username="w_berry"></calcite-navigation-user>
    </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.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
labellabelWhen navigationAction is true, specifies the label of the calcite-action.string
navigationActionnavigation-actionWhen true, displays a calcite-action and emits a calciteNavActionSelect event on selection change.booleanfalse

Slots

NameDescription
userA slot for adding a calcite-user component to the primary navigation level.
progressA slot for adding a calcite-progress component to the primary navigation level.
navigation-actionA slot for adding a calcite-action component to the primary navigation level.
content-startA slot for adding a calcite-menu, calcite-action, or other interactive elements in the start position of any navigation level.
content-centerA slot for adding a calcite-menu, calcite-action, or other interactive elements in the center position of the primary navigation level.
content-endA slot for adding a calcite-menu, calcite-action, or other interactive elements in the end position of any navigation level.
navigation-secondaryA slot for adding a calcite-navigation component in the secondary navigation level. Components rendered here will not display calcite-navigation-logo or calcite-navigation-user components.
navigation-tertiaryA slot for adding a calcite-navigation component in the tertiary navigation level. Components rendered here will not display calcite-navigation-logo or calcite-navigation-user components.

Styles

NameDescription
--calcite-navigation-widthSpecifies the width of the component's content area.
--calcite-navigation-background
deprecated Use --calcite-navigation-background-color. Specifies the background color of the component.
--calcite-navigation-background-colorSpecifies the component's background color.
--calcite-navigation-border-colorSpecifies the component's border color.

Events

NameDescriptionBehavior
calciteNavigationActionSelectWhen navigationAction is true, emits when the displayed action selection changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusWhen navigationAction is true, sets focus on the component's action element.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