Sidenav

Introduction

The sidenav is a list of links, used for navigation.

View in Groundhog

In Dynatrace it is used for settings views. It can show multiple levels of menu items. Therefore, menu items are grouped together in an expandable section.

Styleguide

Sidemenu styles
width: 284px

Headline

font-familiy: Bernina Sans Light
font-weight: 300
font-size: 24px

List item

font-familiy: Bernina Sans Regular
font-size: 14px
border-top: 1px solid $gray-200
border-bottom: 1px solid $gray-200
height: 52px
vertical-align: center
line-height: 32px
background-color: $gray-200

States

Normal

color: $gray-700
font-weight: 400

Hover

color: $turquoise-600
font-weight: 400

Active

color: $turquoise-600
font-weight: 600
border-top: 2px solid $turquoise-600
border-bottom: 2px solid $turquoise-600

Disabled

Sidemenu items can't be disabled.

Animation

The sidemenu component is not animated.

Variants and behavior

The sidemenu items can have an additional description.

Sidemenu with description
font-size: 12px
color: $gray-500

Expandable menu items

To show up to two levels of navigation, the menu items can be expanded.

Sidemenu expanded distances
x: 64px
y: 16px
z: 12px
Sidemenu expanded parts

Category

font-familiy: Bernina Sans Regular
font-size: 12px
font-familiy: Bernina Sans Regular
font-size: 14px
line-height: 32px

Hover (for both hierarchy levels)

color: turquoise-600

Active (for both hierarchy levels)

font-weight: 600
color: turquoise-600
border-top: 2px solid $turquoise-600
border-bottom: 2px solid $turquoise-600
Dropdown open icon
icon-width: 20px
icon: vertical-align: centered

Sidemenu behavior

Sidemenu behavior