nav component navbar


Breadcrumbs are used to navigate and to indicate the currently viewed page.

Breadcrumb example

In Dynatrace we use hierarchy-based breadcrumbs. Each item in the navigation bar represents a page. The navigation bar is always on the top of the page, underneath the menubar and is themeable.


background-color: main theme color
font-familiy: Bernina Sans Regular
font-size: 14px
color: #fff
height: 32px
width: 100%
vertical-align: center

Breadcrumb margin and padding

x: 8px
y: 2px


Breadcrumb default

Current page

background-color: theme color shade 500

Previous page

background-color: main theme color 


Breadcrumb hover

background-color: theme hover color


Breadcrumb active

background-color: theme active color


The navigation bar can't be disabled


The navigation bar is not animated.

Behavior and corner cases

Breadcrumb on 360 abbreviated

Breadcrumb on 360

If there is not enough space to show all items, names can be abbreviated. Multiple items can be collapsed to one - not clickable - item. Use the more icon to indicate this. The link to the first view and the indicator for the currently viewed page should always stay.