Breadcrumbs

nav component navbar

Introduction

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.

Styleguide

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

Default

Breadcrumb default

Current page

background-color: theme color shade 500

Previous page

background-color: main theme color 

Hover

Breadcrumb hover

background-color: theme hover color

Active

Breadcrumb active

background-color: theme active color

Disabled

The navigation bar can't be disabled

Animation

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.