breadcrumb-and-orientation-ui

name	breadcrumb-and-orientation-ui
description	Use when helping users navigate deep hierarchies. Breadcrumbs orient users and signal page depth.

Breadcrumb and Orientation UI

Breadcrumbs: small, hierarchical, separated by chevron or slash. Show location not navigation history.

Breadcrumb anatomy

1. Container: small, top-of-content, before headline
2. Items: small caps, 12pt
3. Separator: '/', '>', or '·'
4. Active item: bold or current-page accent
5. Links: hover underline; current page no link

CSS implementation

.breadcrumbs {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-60);
  margin-bottom: 1em;
}
.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.breadcrumbs .separator {
  margin: 0 0.5em;
  opacity: 0.5;
}

When to use breadcrumbs

1. Documentation pages
2. Product catalogs (3+ levels deep)
3. Multi-step processes (checkout, submission)
4. Multi-tier knowledge base
5. Settings / account pages

Don't use:

• 1-level pages (only homepage)
• Marketing landing pages
• Form steps (use step indicator instead)

Where this fits in the X3 empire

Used in CardPrepAI methodology and knowledge base.