Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

UI shell left panel

Color

Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the IBM Design Language palette.

ClassPropertyColor value
.bx--side-nav__navigationbackground colorWhite
.bx--side-nav__linktext colorGray 70
.bx--side-nav__submenutext colorGray 70
.bx--side-nav__submenu-chevronfillGray 70
.bx--side-nav__menu-itemtext colorGray 70
.bx--side-nav__iconfillGray 70
UI shell side-nav example.

UI shell side-nav example.

ClassPropertyColor value
.bx--side-nav__link:hoverbackground colorGray 10-hover
.bx--side-nav__link:hovertext colorGray 100
.bx--side-nav__link:focusborderBlue 60
.bx--side-nav__link:activebackground colorGray 30
.bx--side-nav__link:activetext colorGray 100
.bx--side-nav__link--currentbackground colorGray 30
.bx--side-nav__link--currenttext colorGray 100
:beforebackground colorBlue 60
Link states

Link states

ClassPropertyColor value
.bx--side-nav__submenu:hoverbackground colorGray 10-hover
.bx--side-nav__submenu:hovertext colorGray 100
.bx--side-nav__submenu:focusborderBlue 60
.bx--side-nav__submenu:activebackground colorGray 30
.bx--side-nav__submenu:activetext colorGray 100
.bx--side-nav__menu-item:hoverbackground colorGray 30
.bx--side-nav__menu-item:hovertext colorGray 100
.bx--side-nav__menu-item:focusborderBlue 60
.bx--side-nav__menu-item:activebackground colorGray 30
.bx--side-nav__menu-item:activetext colorGray 100
.bx--side-nav__menu-item--currentbackground colorGray 30
.bx--side-nav__menu-item--currenttext colorGray 100
:beforebackground colorBlue 60
Sub-menu states

Sub-menu states

Icon

ClassPropertyColor value
.bx--side-nav__icon:hoverfillGray 100
.bx--side-nav__icon:activefillGray 100
.bx--side-nav__icon--currentfillGray 100

Typography

Menu labels and text should be set in sentence case.

ClassFont-size (px/rem)Font-weightType token
.bx--side-nav__link14 / 0.875SemiBold / 600$heading-01
.bx--side-nav__submenu14 / 0.875SemiBold / 600$heading-01
.bx--side-nav__menu-item14 / 0.875Regular / 400$body-short-01

Structure

The panel spans the full height of the browser and is fixed to the left edge of the window.

ClassPropertypx/remSpacing token
.bx--side-nav__navigationwidth256 / 16–
.bx--side-nav__linkheight32 / 2–
.bx--side-nav__linkpadding left, padding right16 / 1$spacing-05
.bx--side-nav__submenuheight32 / 2–
.bx--side-nav__submenupadding left, padding right16 / 1$spacing-05
.bx--side-nav__menu-itemheight32 / 2–
.bx--side-nav__menu-itempadding left32 / 2$spacing-07
.bx--side-nav__menu-itempadding right16 / 1$spacing-05
:beforewidth4 / 0.25–
.bx--side-nav__iconsize16 / 1–
ui shell side-nav

Structure and spacing measurements for the side-nav | px | rem.

ui shell side-nav with icons

Structure and spacing measurements for side-nav with icons | px | rem.