Shell

All pages include the Shell components. These help contextualize the current screen, indicating where you are within the product, how to get back or hop to a different area or services.

Shell anatomy

Shell Anatomy
  • (1) Global top bar
  • (2) System breadcrumb
  • (3) Navigation bar

Navigation bar

Shell Nav Bar

  • (1) Product title

  • (2) Service

  • (3) Page

  • (4) Selected page

  • (5) Level 1 items (also known as “L1”)

  • (6) Level 2 items (also known as “L2”)

  • Do: Keep number of items in L2 to a minimum.

  • Don’t: Rely on L2 for essential navigation and context, as it is hidden in smaller screens.

Navigation bar L2 components

Shell Nav Bar Internal
  • (1) Overview
  • (2) Boards
  • (3) Repos
  • (4) Pipelines
  • (5) Test Plans
  • (6) Artifacts

Global top bar

Shell Global Top Bar

  • (1) Default

  • (2) Compact

  • (3) Side actions

  • Do: Include only system level tasks.

  • Don’t: Include items related to active page, current project, etc.

System breadcrumb

Every page must inform the Breadcrumb API about its location within the hierarchical information architecture.

Shell Breadcrumb
  • (1) Default breadcrumb
  • (2) Breadcrumb item mouseover ($neutral-alpha-6)
  • (3) Breadcrumb item focus
  • (4) Breadcrumb item active ($neutral-alpha-8)
Shell Breadcrumb Collapse

When space is not available, the first items of the breadcrumb can be collapsed:

  • (1) Hidden first items
  • (2) Hidden first items, overflow mouseover
  • (3) Hidden first items, overflow focus
  • (4) Hidden first items, overflow active

Responsive breakpoints

xlarge: ≥ 1920px

Shell Breakpoint XL
  • (1) Navigation bar: 240px
  • (2) Sidebar: 384px
  • (3) Main content: auto

Note: The example shows a 1920px screen size.

large: ≥ 1366px

Shell Breakpoint L
  • (1) Navigation bar: 240px
  • (2) Sidebar: 320px
  • (3) Main content: auto

Note: The example shows a 1919px screen size.

Shell Breakpoint L 2
  • (1) Navigation bar: 240px
  • (2) Sidebar: 320px
  • (3) Main content: auto

Note: The example shows a 1440px screen size.

Shell Breakpoint L 3
  • (1) Navigation bar: 240px
  • (2) Sidebar: 320px
  • (3) Main content: auto

Note: The example shows a 1366px screen size.

medium: ≥ 1024px

At this breakpoint, the “compact” view stops being an option: the navigation bar is always collapsed, with only L1 items shown

Shell Breakpoint M
  • (1) Navigation bar: 48px
  • (2) Sidebar: 280px
  • (3) Main content: auto

Note: The example shows a 1355px screen size.

Shell Breakpoint M 2
  • (1) Navigation bar: 48px
  • (2) Sidebar: 280px
  • (3) Main content: auto

Note: The example shows a 1024px screen size.

small: ≥ 600px

Shell Breakpoint S

Note: The example shows a 600px screen size.

xsmall: < 600px

Shell Breakpoint XS

Note: The example shows a 400px screen size.

Changes to the Shell

Any changes to the Shell components must be considered and studied across teams and services, including the design system team. Patterns introduced to the Shell components will have an impact across the entire product, and should not be agreed to in isolation.

Related