Breadcrumb

Overview

The Breadcrumb block displays the path through your tree to the current page. Each item except the last is a clickable link. Includes Schema.org BreadcrumbList microdata for SEO.

Type: App Block (add to any section)

Example: Home › Men's › Shirts › Casual

Adding the block

1. Go to Online Store → Themes → Edit theme
2. Navigate to a collection or product page template
3. Click Add section or Add block
4. Select Breadcrumb
5. Enter your Tree ID (find it in the TreeNav app dashboard)
6. Configure settings and save

Content settings

Context settings

Truncation example

With a 6-level path and "Levels to show" set to 3:

• Full path: Home › Electronics › Computers › Laptops › Gaming › ASUS
• Truncated: Home › Electronics › … › Gaming › ASUS

The first item (after Home) is always shown, followed by ellipsis, then the last N levels.

Layout settings

Typography settings

Color settings

How path detection works

Collection pages

Shows the full path through your tree to the current collection. If the collection exists in multiple places in your tree, the first occurrence is used.

Product pages

TreeNav finds the deepest matching collection from the product's collections that exists in your tree. This ensures the most specific breadcrumb path.

Example: A product in both "Men's" (depth 1) and "Men's › Shirts › Casual" (depth 3) will show the deeper path.

Other page types

The breadcrumb automatically adapts to different page types:

Collection not in tree

If a collection page's collection isn't found in your tree, the breadcrumb shows just the collection title (no tree path):

Home › Collection Title

SEO benefits

The block automatically includes Schema.org BreadcrumbList structured data:

{
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "position": 1, "name": "Home", "item": "https://..." },
    { "position": 2, "name": "Men's", "item": "https://..." },
    { "position": 3, "name": "Shirts" }
  ]
}

Benefits

• Rich snippets – Search engines may display breadcrumbs in search results
• Site structure – Helps search engines understand your category hierarchy
• Click-through rate – Breadcrumbs in search results can improve CTR

Validation

Test your breadcrumbs with Google's Rich Results Test or view page source to inspect the JSON-LD script.

Accessibility

• <nav aria-label="Breadcrumb"> landmark for screen readers
• aria-current="page" on the current/last item
• Semantic <ol> list structure
• Schema.org microdata with itemprop attributes
• Truncation ellipsis has aria-label for hidden levels

Troubleshooting

CSS customization

Override default styles using these CSS classes:

CSS custom properties

Override these variables in your theme CSS:

.treenav-breadcrumb {
  --bc-separator: '›';
  --bc-gap: 8px;
  --bc-text: #303030;
  --bc-text-hover: #000000;
  --bc-current: #707070;
  --bc-separator-color: #707070;
}

More questions? See the FAQ & Troubleshooting guide or contact us.