Overview
Navigation User is designed to work within Navigation to provide a consistent orientation for the users of your application.
Sample
<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>
Accessibility
Keyboard navigation
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(): Promise<void> |