Skip to content

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

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	Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies.	`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	Specifies the components's border color when `active`.
--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	Create a promise that resolves once component is fully loaded.	`componentOnReady(): Promise<void>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`