Components / Library Version 5.4.0

Navigator

This component allows Watermark users to switch between products. It displays a dropdown menu with a list of products that a Watermark user has permission to access, as well as the option to log out. The product data can be retrieved from an endpoint (with load-from-userinfo set to true), or passed via props (props mode).

Properties

Examples

API

Accessibility

* Required property ** Required in certain cases

user-name *

string

The name of the user to display in the menu.

auth-type **

1 | 2 | 3

The auth type will determine whether the menu options will redirect to the link_url or the saml_link_url of the user's modules. Set the value as follows:

none or off: 1
username-password or username_password_sso: 2
saml or saml_sso: 3

email **

string

The email to display in the menu.

connection-name

string

This value will be included as a route parameter in each product link.

load-from-userinfo

boolean

When this mode is enabled, all the data is retrieved automatically except for the user name (because the displayed name can vary between products). When this property is set to true user-name is the only required property.

logout-url

string

The component will redirect to this link when the user clicks the logout option. You can leave this out if you prefer to handle the logout yourself (using the wmNavigatorLogout event).

products

JSON string | array

The products, i.e., user modules, accessible to the user. The user's modules should be fetched, and the data should be filtered to include the id of the product, its saml_link_url, link_url, icon_url and name.

You can pass either an array of objects or a stringified array.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Note: When in "endpoint mode" (load-from-userinfo="true"), the component expected the data as JSON at the endpoint /platform/navigator/userinfo. For the example below to work this site serves fake data at this endoint, which you can see by clicking here

Usage in Elm

Code generated from HTML.

wmActionMenuLoaded

Emitted when the menu has finished loading.

Keyboard Support

Key	Function
`Arrow Down`	If focus is on the button, opens menu and focuses the option below the current product. If an option is in focus, moves focus to the next option in the menu.
`Arrow Up`	If focus is on the button, opens menu and focuses the option above the current product. If an option is in focus, moves focus to the previous option in the menu.
`Enter` `Space`	If focus is on the button, opens the menu and focuses the current product in the list. If there is not more than one product, the log out option receives focus. If focus is on an option, activates the option.
`Escape`	Closes the menu.