Navigation

Navigation helps users move around the app and know where they are. The CTD Learns App has three navigation patterns: the sidebar (primary navigation to top-level sections), the topbar (shows the current page and user actions), and breadcrumbs (show the path from the top of the site to the current page, useful for deep pages like Processes > Onboarding > Form Editor). Active nav items use a subtle gray background with navy text. Never orange. Orange is reserved for CTAs.

Interactive Preview

Breadcrumb — Navigation path

Props

depth

Current page

Sidebar

CTD LearnsCTD Learns
Design System + Playground
Overview
    Home
    Playground
    Coming soon
Foundations
    Tokens
    Colors
    Typography
    Spacing
Property
Value

Width

268px
·fixed, not resizable

Active item bg

#F0F0F1gray100

Active item text

#12284Cnavy
·500

Inactive text

#4A4A50gray600

Item height

40px

Item padding

vertical8px
·horizontal8px 12px

Item radius

8pxradiusMd

Icon size

20px

Icon color (inactive)

#9E9EA3gray400

Topbar

KB
Property
Value

Height

52px

Border

bottom1px solid #E2E2E4gray200

Breadcrumb

left-aligned

User avatar

circle28px
·right-aligned

Breadcrumb

Property
Value

Ancestor links

#9E9EA3gray400
·hover#4A4A50gray600

Active (last) item

#4A4A50gray600
·500

Separator

#C8C8CBgray300

Font size

14px

Code

Sidebar nav item
<ListItemButton selected={isActive}>
  <ListItemIcon>
    <WorkflowIcon fontSize="small" />
  </ListItemIcon>
  <ListItemText primary="Processes" />
</ListItemButton>

// Active state comes from theme overrides:
// backgroundColor: gray100
// color: navy
// fontWeight: 500
Breadcrumb
<Breadcrumbs separator={<ChevronRightIcon />}>
  <Link underline="hover" color="text.secondary" href="/processes">
    Processes
  </Link>
  <Link underline="hover" color="text.secondary" href="/processes/onboarding">
    Onboarding
  </Link>
  <Typography fontWeight={500} color="text.primary">
    Step 2
  </Typography>
</Breadcrumbs>
MenusFeedback