<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 | String | – |
| theme | Adopt the theming for the component | light, dark | light |
| dropdown-label | Set label for dropdown-menu | String | – |
| 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='[{ "url": "#Dashboard", "label": "Dashboard" },{ "url": "#Equipment", "label": "Equipment" },{ "url": "#OpenServiceTickets", "label": "Open Service Tickets" },{ "url": "#PlannedActivities", "label": "Planned Activities" },{ "url": "#Contracts", "label": "Contracts" },{ "url": "#SystemUpdates", "label": "System Updates" },{ "url": "#Reporting", "isActive": true, "label": "Reporting" },{ "url": "#CustomerImpersonation", "label": "Customer Impersonation" },{ "url": "#Administration", "label": "Administration" }]'
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='[{ "url": "#Dashboard", "isActive": true, "label": "Dashboard" },{ "url": "#Equipment", "label": "Equipment" },{ "url": "#OpenServiceTickets", "label": "Open Service Tickets" }]'
app-identifier="App Identifier"
>
</uimc-navigation-bar>
Dark theme
<uimc-navigation-bar
items='[{ "url": "#Dashboard", "isActive": true, "label": "Dashboard" },{ "url": "#Equipment", "label": "Equipment" },{ "url": "#OpenServiceTickets", "label": "Open Service Tickets" }]'
app-identifier="App Identifier"
theme="dark"
>
<button class="button button--primary button--small margin-bottom-0">Primary action</button>
</uimc-navigation-bar>
