CogniSync
CogniSync Design System

Breadcrumbs

Breadcrumbs show where someone is in the hierarchy and offer quick jumps to parent levels. Use a chevron separator, muted parent links, and a clear current page.

Examples

Default trail

Two or three segments with the last item as the current page (no link).

Preview
Examples

Collapsed path

When there are many segments, middle items move into an overflow menu (ellipsis trigger).

Preview
Examples

Current page menu

Pair the current page with a small chevron menu for sibling routes or actions when needed.

Preview
Guidelines

Usage

Do

  • Keep labels short and aligned with primary navigation.
  • Make every parent segment a link; leave the current page as plain text.

Avoid

  • Don’t use breadcrumbs as the only navigation affordance on the page.
  • Don’t render multiple breadcrumb landmarks in the same view.