Skip to main contentCarbon Design System

UI shell header

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 Langauge palette.

ClassPropertyColor value
.bx--headerbackground colorGray 100
.bx--headerborder-bottomGray 80
.bx--header__nametext colorGray 10
.bx--header__menu-triggerfillGray 10
.bx--header__nav::beforeborderGray 80
ui shell header
ClassPropertyColor value
.bx--header__menu-triggerfillGray 10
.bx--header__menu-trigger:hoverbackground colorGray 100-hover
.bx--header__menu-trigger:focusborderWhite
.bx--header__menu-trigger:activebackground colorGray 80
Menu trigger interactive states

Menu-trigger interactive states

ClassPropertyColor value
.bx--header__menu-itemtext colorGray 30
.bx--header__menu-itemsvgGray 30
.bx--header__menu-item:hoverbackground colorGray 100-hover
.bx--header__menu-item:hovertext colorGray 10
.bx--header__menu-item:hoversvgGray 10
.bx--header__menu-item:focusborderWhite
.bx--header__menu-item:activebackground colorGray 80
.bx--header__menu-item:activetext colorGray 10
.bx--header__menu-item:activesvgGray 10
Menu item interactive states

Sub-menu interactive states

ClassPropertyColor value
.bx--header__submenubackground colorGray 90
.bx--header__submenutext colorGray 30
.bx--header__submenu:hoverbackground colorGray 90-hover
.bx--header__submenu:hovertext colorGray 10
.bx--header__submenu:focusborderWhite
.bx--header__submenu:activebackground colorGray 70
.bx--header__submenu:activetext colorGray 10
Sub-menu interactive states

Action

ClassPropertyColor value
.bx--header__actionfillGray 30
.bx--header__action:hoverbackground colorGray 100-hover
.bx--header__action:hoverfillGray 10
.bx--header__action:focusborderWhite
.bx--header__action:activebackground colorGray 80
.bx--header__action:activefillGray 10
Header action interactive states

Header action interactive states

Typography

Menu labels and text should be set in sentence case.

ClassFont-size (px/rem)Font-weightType token
.bx--header__name14 / 0.875SemiBold / 600$heading-01
.bx--header__name--prefix14 / 0.875Regular / 400$body-short-01
.bx--header__menu-item14 / 0.875Regular / 400$body-short-01

Structure

The header should span the full width of the browser window. The header can either stay sticky to the top of the browser or scroll away.

ClassPropertypx/remSpacing token
.bx--headerheight48 / 3
.bx--header__menu-triggerheight, width48 / 3
.bx--header__namepadding-left16 / 1$spacing-05
.bx--header__namepadding-right32 / 2$spacing-07
.bx--header__navpadding-left16 / 1$spacing-05
.bx--header__menu-itempadding-left, padding right16 / 1$spacing-05
.bx--header__menu-arrowpadding-left8 / 0.5$spacing-03
.bx--header__submenupadding-left, padding right16 / 1$spacing-05
.bx--header__actionheight, width48 / 3
ui shell header spec

Structure and spacing measurements for UI shell header | px | rem

ui shell header submenu spec

Structure and spacing measurements for header submenu | px | rem

Responsive behavior

In smaller broswer windows, menu items in the header should collapse into the left side nav menu. Items that were once in the header should stack at the top of the side nav panel if other items were already present in the panel.

responsive behavior example

Responsive behavior for UI shell header