sticky-navigation
Component displaying a sticky-navigation bar. Add <code>tui-sticky-nav-anchor</code> classes to elements that should be treated as navigation anchors.
The sticky-navigation MFE provides navigation bar that sticks to top of the screen on scroll.
Screenshots
Usage
Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.
<script src="https://nonprod.cloud.tui.com/osp/ao/ui/sticky-navigation/current/sticky-navigation.esm.js" defer></script>Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.
<tui-sticky-navigation></tui-sticky-navigation>Examples
Basic example
<tui-sticky-navigation anchors="[{"name":"Overview","id":"foo", "icon": "list", "data-qa-id": "foo"},{"name":"Rooms","id":"bar", "icon": "bed-double", "data-qa-id": "bar"},{"name":"About the hotel","id":"baz", "icon": "hotel", "data-qa-id": "baz"}]"></tui-sticky-navigation>
Attributes
This microfrontend accepts the following attributes:
| Name | Description | Values | Default | Required |
|---|---|---|---|---|
anchors | Stringified version of JS array with the following signature: Array<{name: string; id: string; icon: string}> | no | ||
render-without-background | Set to true if no background should be rendered | no | ||
theme | Theme to be used in UIs | firstchoice, tui-light | no |
Events
This microfrontend emits the following events:
| Event | Schema |
|---|---|
Emitted when component becomes sticky or stops being sticky. | |