Aug 28, 2025
0 views
SC Breadcrumb builds a clean, responsive breadcrumb trail from the current URL, with configurable separator, max items (auto-ellipsis), alignment, and typography. It can also output schema.org JSON-LD for SEO (BreadcrumbList + optional BlogPosting), with empty-field cleanup for tidy markup.
//
Tags
Drop SCBreadcrumb into your page header area.
Set Separator (e.g., /, ›, →).
Choose Max Items (older items collapse to …).
Pick Alignment (Left/Center/Right).
(Optional) Style with the Font, Color, Hover controls.
(Optional) Enable SEO: fill Breadcrumb Name/Slug/Root and/or Blog fields to emit JSON-LD.
Classic: separator="/" · maxItems=3 · color=#555 · hover=#0A7
Chevrons: separator="›" · maxItems=4 · center
Minimal: separator="•" · maxItems=2 · right
Path parsing: window.location.pathname → /a/b/c → ['a','b','c'].
Formatting: formatTitle() decodes URI, swaps -/_ with spaces, Title-Cases words.
Overflow: If segments.length > maxItems, prepend … and keep the last maxItems segments.
Link building: Each non-last crumb links to its cumulative absolute URL (origin + /a/...).
Schema:
BreadcrumbList uses Root → Name/Slug → (optional) Headline.
BlogPosting uses blog fields (author/publisher/logo/image/dates).
cleanObject() removes empty strings/arrays/objects before JSON-LD injection.
Text-only render; virtually zero layout cost.
Avoid extremely long labels; rely on maxItems to keep trails short.
Hover color changes are GPU-friendly; transition is limited to color.
Requires window.location (client render). For SSR, outputs a safe fallback (/) until hydrated.
JSON-LD is appended via <script type="application/ld+json">; safe in all evergreen browsers.
Ellipsis crumb … is non-interactive by design.
Use inside a <nav aria-label="Breadcrumb"> region when possible.
Last item should not be a link; mark it as the current page (aria-current="page" if wrapped in an anchor).
Separators are decorative—render as text with aria-hidden="true" or CSS ::before.
No network calls or storage.
JSON-LD strings are serialized, not executed; still ensure values come from trusted sources (avoid piping untrusted user input directly).
Uses window.location only; no cookies or tracking.
Small surface area; no global listeners.
Use inside a <nav aria-label="Breadcrumb"> region when possible.
Last item should not be a link; mark it as the current page (aria-current="page" if wrapped in an anchor).
Separators are decorative—render as text with aria-hidden="true" or CSS ::before.
No network calls or storage.
JSON-LD strings are serialized, not executed; still ensure values come from trusted sources (avoid piping untrusted user input directly).
Uses window.location only; no cookies or tracking.
Small surface area; no global listeners.
Designed and implemented by SecretoCho Design. Pattern-safe URL formatting and schema cleanup helpers included.
SecretoCho Design 2025
Provided “as is” for navigation/SEO convenience. Validate structured data in your environment (Search Console/Rich Results Test) and ensure all values (images, author, publisher) are licensed and accurate.
Stay ahead of the curve with insights into emerging visualization trends and technologies.