UI MarCom 3

Navigation bar Stable Dark theme

The Navigation Bar is the part of the Header that contains the global navigation.

<uimc-navigation-bar 
  items='[]'
  app-identifier=""
>
</uimc-navigation-bar>

AttributeDescriptionValuesDefault
itemsDefines the navigation itemsJSON formatted Array
identifierThe app identifier is visible on small viewports, so set the same as in the Application BarString
themeAdopt the theming for the componentlight, darklight
dropdown-labelSet label for dropdown-menuString

CallbackArgumentDescription
onClickitemPass a callback function that gets triggered when a navigation item is clicked

SlotSlotted content
defaultOptionally 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>