Navigation User | Calcite Design System | Esri Developer

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

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.

API reference

Properties

Property	Attribute	Description	Type	Default
active	active	When `true`, the component is highlighted.	`boolean`	`false`
fullName	full-name	Specifies the full name of the user.	`string`
label	label	Specifies an accessible label for the component.	`string`
textDisabled	text-disabled	When `true`, hides the `fullName` and `username` contents.	`boolean`	`false`
thumbnail	thumbnail	Specifies the `src` to an image (remember to add a token if the user is private).	`string`
userId	user-id	Specifies the unique id of the user.	`string`
username	username	Specifies the username of the user.	`string`

Styles

Name	Description
--calcite-navigation-accent-color	When `active`, specifies the component's border color.
--calcite-navigation-user-avatar-corner-radius	Specifies the component's avatar corner radius.
--calcite-navigation-user-avatar-color	Specifies the component's avatar icon color.
--calcite-navigation-background-color	Specifies the component's background color.
--calcite-navigation-user-full-name-text-color	Specifies the component's `fullName` text color.
--calcite-navigation-user-name-text-color	Specifies the component's `username` 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>`