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 Bar
themeAdopt the theming for the componentlight, darklight
dropdown-labelSet label for dropdown-menu

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='[{"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>