C&C Docs
Log in

cnc-breadcrumbs

The trail of where you are. Pass an array of segments and the widget renders the links, the separators and the current page. When the trail is longer than the space it has, it does not truncate or wrap: it scrolls, starts at the end so the current page is visible, fades whichever edge is hiding something, and can be dragged with the pointer.

Quick start

segments is an array, so it is passed with $segments rather than as a plain attribute. Give the last segment no href — that is what marks it as the page you are on. 

<cnc-breadcrumbs
  $segments='[
    {"label":"Dashboard","href":"/","icon":"heroicons/home"},
    {"label":"Projects","href":"/projects"},
    {"label":"Settings"}
  ]'
></cnc-breadcrumbs>

Things to know

  • The last crumb is styled as the current page. It is bolder and darker regardless of whether it has an href. If every segment is linked, the emphasis is still on the last one — which reads oddly, so leave the current page unlinked.
  • Optional condensation. Add condensed to preserve the first and last segments around an expandable ellipsis. Without it, long paths remain available through scrolling and the arrow controls.
  • The strip has no keyboard scroll. Dragging and the scrollbar-less overflow are pointer affordances; the links themselves are still tabbable, and focusing one scrolls it into view, but there is no arrow-key handling on the strip.
  • home always points at /. It is not configurable. For a different root, write that crumb into the array yourself.
  • The trail is fixed after the first render. init() copies segments into the private array the template loops over, and init() runs once. A later change to the bound value updates nothing — the crumbs you server-render are the crumbs you keep for the life of the element. Navigate, or re-render the page, rather than trying to move the trail in place.

Usage guidance

Breadcrumbs are for a hierarchy the reader can climb — a folder tree, a category path, a nested settings area. They are not a history trail and not a wizard: use cnc-steps when the sequence is a process the reader is working through, and cnc-tabs when the destinations are siblings rather than ancestors. Keep the labels short; the widget will scroll a long trail rather than truncate it, and a strip that always needs dragging is a sign the labels, not the widget, are the problem.

Public CSS parts

Customize .cnc-breadcrumbs_nav, .cnc-breadcrumbs_list, .cnc-breadcrumbs_segment, .cnc-breadcrumbs_content, .cnc-breadcrumbs_icon, .cnc-breadcrumbs_label, .cnc-breadcrumbs_separator, .cnc-breadcrumbs_ellipsis, and .cnc-breadcrumbs_scroll through their semantic CSS variables.

Public CSS parts

.cnc-breadcrumbs_nav, .cnc-breadcrumbs_list, .cnc-breadcrumbs_segment, .cnc-breadcrumbs_content, .cnc-breadcrumbs_icon, .cnc-breadcrumbs_label, .cnc-breadcrumbs_separator, .cnc-breadcrumbs_ellipsis, and .cnc-breadcrumbs_scroll.

← Back to Widgets