Nav Indicators
Nav indicators are available in three styles: arrow, caret, and chevron. Nav indicators can be used for any purpose, not just for navigation. However, the navbar component and the toggle container both know how to operate nav indicators automatically when correctly added to the markup. Apart from this, its just a case of toggling the active class on the nav indicator element.
Nav Indicator Example
The following example shows how to set up a simple manually controlled nav indicator using the arrow indicator type.
NOTE: Component instance properties are optional and can be omitted if the default settings are acceptable.
<div id="nav-indicator-holder"> <label class="nav-indicator"></label> </div> <div class="row-spacing-lg"></div> <button class="button-md button-info" id="nav-indicator-button">Toggle Nav Indicator</button>
HTML
webui.ready( () => {
ui("#nav-indicator-holder [class*=nav-indicator]").navIndicatorControl({
indicatorType: "arrow",
indicatorSize: "medium",
backgroundColor: "transparent",
color: "rgb(14, 143, 241)",
transitionDuration: 500
});
ui("#nav-indicator-button").click( () => {
ui("#nav-indicator-holder [class*=nav-indicator]").toggleClass("active");
})
});
JS
Nav Indicator Classes
Classes available for nav indicators.
| Class | Description |
|---|---|
| nav-indicator | Defines a nav indicator with a starting orientation pointing down. |
| nav-indicator-left | Defines a nav indicator with a starting orientation pointing right. |
| nav-indicator-right | Defines a nav indicator with a starting orientation pointing left. |
| nav-indicator-up | Defines a nav indicator with a starting orientation pointing up. |
| active | Rotates the nav indicator when applied. |
Settings
Javascript settings available for the nav indicator control.
| Property | Description |
|---|---|
| indicatorType | Sets the indicator style. Can be "arrow", "caret" or "chevron". Default: "caret". |
| indicatorSize | Sets the indicator size. Can be either "small", "medium" or "large". Default: "medium". |
| backgroundColor | Sets the background behind the SVG indicator element. Default: "transparent" |
| color | Sets the SVG indicator color. Default: "#000000". |
| transitionDuration | The duration in milliseconds for the nav indicator rotation. Default: 500 |