Navigation User

Child component of Navigation

Overview

Navigation User is designed to work within Navigation to provide a consistent orientation for the users of your application.

Sample

1
2
3
4
5
6
7
8
9
<calcite-shell>
    <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" heading="Ecosystem Status"></calcite-navigation-logo>
        <calcite-chip icon="activity-monitor" slot="content-start">
            It's all good
        </calcite-chip>
        <calcite-navigation-user slot="user" full-name="Wendell Berry" username="w_berry"></calcite-navigation-user>
    </calcite-navigation>
</calcite-shell>
v3.0.3

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
activeactiveWhen true, the component is highlighted.booleanfalse
fullNamefull-nameSpecifies the full name of the user.string
labellabelDescribes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies.string
textDisabledtext-disabledWhen true, hides the fullName and username contents.booleanfalse
thumbnailthumbnailSpecifies the src to an image (remember to add a token if the user is private).string
userIduser-idSpecifies the unique id of the user.string
usernameusernameSpecifies the username of the user.string

Styles

NameDescription
--calcite-navigation-accent-colorSpecifies the components's border color when active.
--calcite-navigation-user-avatar-corner-radiusSpecifies the component's avatar corner radius.
--calcite-navigation-user-avatar-colorSpecifies the component's avatar icon color.
--calcite-navigation-background-colorSpecifies the component's background color.
--calcite-navigation-user-full-name-text-colorSpecifies the component's fullName text color.
--calcite-navigation-user-name-text-colorSpecifies the component's username text color.

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