Skip to main contentCarbon Design System

UI shell left panel

Color

The UI Shell can be customized to use any of the four IBM themes by applying inline theming to the shell zone.

ElementPropertyColor token
Panelbackground color$background
UI shell side-nav example.

UI shell side-nav example.

StatePropertyColor token
Enabledtext color$text-secondary
Hoverbackground color$background-hover
text color$text-primary
Focusborder$focus
Activebackground color$background-active
text color$text-primary
Selectedbackground color$background-selected
text color$text-primary
border$border-interactive
Link states

Link states

ElementStatePropertyColor token
Sub-menuEnabledtext color$text-secondary
svg$icon-secondary
Hoverbackground color$background-hover
text color$text-primary
svg$icon-primary
Focusborder$focus
Activebackground color$background-active
text color$text-primary
svg$icon-primary
Sub-menu itemEnabledtext color$text-secondary
Hoverbackground color$backgound-hover
text color$text-primary
Focusborder$focus
Activebackground color$background-active
text color$text-primary
Selectedbackground color$background-selected
text color$text-primary
border$border-interactive
Sub-menu states

Sub-menu states

Icon

StatePropertyColor token
Enabledsvg$icon-secondary
Hoversvg$icon-primary
Activesvg$icon-primary
Selectedsvg$icon-primary

Typography

Menu labels and text should be set in sentence case.

ElementFont-size (px/rem)Font-weightType token
Link14 / 0.875SemiBold / 600$heading-compact-01
Sub-menu14 / 0.875SemiBold / 600$heading-compact-01
Sub-menu item14 / 0.875Regular / 400$body-compact-01

Structure

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

ElementPropertypx/remSpacing token
Panelwidth256 / 16
Linkheight32 / 2
padding left, padding right16 / 1$spacing-05
Sub-menuheight32 / 2
padding left, padding right16 / 1$spacing-05
Sub-menu itemheight32 / 2
padding left32 / 2$spacing-07
padding right16 / 1$spacing-05
Selected borderwidth4 / 0.25
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.