<uimc-navigation-bar
items='[]'
app-identifier=""
>
</uimc-navigation-bar>
| Attribute | Description | Values | Default |
|---|
| items | Defines the navigation items | JSON formatted Array | – |
| identifier | The app identifier is visible on small viewports, so set the same as in the Application Bar | | – |
| theme | Adopt the theming for the component | light, dark | light |
| dropdown-label | Set label for dropdown-menu | | – |
| Callback | Argument | Description |
|---|
| onClick | item | Pass a callback function that gets triggered when a navigation item is clicked |
| | |
| Slot | Slotted content |
|---|
| default | Optionally add a small button as a call-to-action |
With primary action
<uimc-navigation-bar
items='[{"label": "My Dashboard", "url": "#", "isActive": true}, {"label": "All Equipment", "url": "#"}, {"label": "Open Service Tickets", "url": "#"}]'
app-identifier="App Identifier"
>
<button class="button button--primary button--small margin-bottom-0">Primary action</button>
</uimc-navigation-bar>
w/o primary action
<uimc-navigation-bar
items='[{"label": "My Dashboard", "url": "#", "isActive": true}, {"label": "All Equipment", "url": "#"}, {"label": "Open Service Tickets", "url": "#"}]'
app-identifier="App Identifier"
>
</uimc-navigation-bar>
Dark theme
<uimc-navigation-bar
items='[{"label": "My Dashboard", "url": "#", "isActive": true}, {"label": "All Equipment", "url": "#"}, {"label": "Open Service Tickets", "url": "#"}]'
app-identifier="App Identifier"
theme="dark"
>
<button class="button button--primary button--small margin-bottom-0">Primary action</button>
</uimc-navigation-bar>
