Generate Breadcrumb Navigation

Build a breadcrumb navigation component with Schema.org markup, customizable separators, and automatic page hierarchy detection.

View as Markdown

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create a breadcrumb navigation block for my Shopify theme:

Features:

  Auto-detect page hierarchy (Home > Collection > Product)
  Schema.org BreadcrumbList markup for SEO
  Customizable separator icon (arrow, slash, chevron)
  Current page shown as non-linked text
  Truncate long breadcrumb titles on mobile


Settings:

  Separator style (arrow / slash / chevron / dot)
  Text color
  Font size
  Show on homepage toggle
  Background color (transparent option)


Requirements:

  Works on product, collection, blog, article, and custom pages
  Mobile responsive with horizontal scroll if needed
  Accessible ARIA navigation landmark
  Generate the complete Liquid, CSS, and JavaScript for this as a theme snippet I can paste into my own theme


Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Snippets (e.g. snippets/breadcrumb-navigation.liquid), paste the generated code in, and save. Then open your product, collection, blog, article, and page templates and add {% render 'breadcrumb-navigation' %} near the top of each, just below the header.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions