CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Breadcrumbs

The path from the home of a section to the current page.

Show hierarchy and offer a way up.

Live componentResponsive playground

What this describes

Default
Standard
Compact
Boxed

When to use

  • The page sits more than one level under a section.
  • The person may need to move up one level.

When not to use

  • A single top-level page.
  • A wizard step list. Use Stepper.

Allowed variants

Standard

A normal trail.

Hierarchy
Text links.
Use in
Interior pages.
Restriction
Last item is not a link.
Accessibility
Named navigation landmark.
Responsive
Wraps or uses compact before overflow.

Compact

A short trail in a tight header.

Hierarchy
Smaller type.
Use in
Dense pages.
Restriction
Do not go below readable body contrast.
Accessibility
Same landmark.
Responsive
Preferred under 480px.

Boxed

A trail that needs a surface of its own.

Hierarchy
Tinted box.
Use in
Pages with a busy header.
Restriction
The box is not a button.
Accessibility
Links inside remain links.
Responsive
The box can be full width. It does not exceed the column.

Mandatory rules

BC-001RequiredARIA

Use a navigation landmark named Breadcrumb

The trail is a nav element with an accessible name.

Implementation detail

Without a name, it is another unlabeled navigation region.

Use Breadcrumb. If you restyle it, keep nav and aria-label="Breadcrumb".

Check: The landmark name is Breadcrumb.

Source

BC-002RequiredHTML

The current page is text, not a link

The last crumb is the current page and is not a link to itself.

Implementation detail

A link to the current URL adds a useless stop in the tab order.

Render earlier crumbs as links. The last crumb is plain text.

Check: The last crumb has no href.

BC-003RecommendedProposed CSC convention

Collapse the trail on small screens instead of overflowing

Compact reduces type size. It still must not force horizontal page scroll.

Implementation detail

Proposed CSC Standard. Long trails at 320px need wrap or truncation of middle crumbs with the current page still visible.

Use variant="compact" under 480px. Do not put the trail in a nowrap row that widens the page.

Check: At 320px the page width matches the viewport.

Restrictions

No conditional or prohibited rules are published for this component.

Accessibility

  • nav with an accessible name.
  • Current crumb is not a link.

Responsive behavior

  • Prefer compact on narrow screens.
  • Do not horizontally scroll the page to read the trail.

Component states

Correct implementation

Section trailCorrect implementation · TSX

Earlier crumbs are links. The last crumb is the current page and is not a link.

Imports: None. Dependencies: None. Rules: BC-001, BC-002.

export function RecordTrail() {
  return (
    <nav aria-label="Breadcrumb" style={{ display: 'flex', gap: 9, color: '#8290A3', fontSize: 12 }}>
      <a href="/">Home</a>
      <a href="/applications">Applications</a>
      <strong style={{ color: '#243B5B' }}>Overview</strong>
    </nav>
  );
}

Incorrect implementation

No incorrect example is published for this component.

Common mistakes

  • Including the current page as a link.
  • Using breadcrumbs as the only navigation.

Testing checklist

Agent prompts for this component are in the AI Development Hub.