Components / Library Version 4.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).
* Required property ** Required in certain cases
string
1 | 2 | 3
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
string
string
boolean
user-name
is the only required prop.
string
wmNavigatorLogout
event).
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.
Keyboard Support
Key | Function |
---|---|
Arrow Down |
|
Arrow Up |
|
Enter Space |
|
Escape | Closes the menu. |