Breadcrumb

Purpose

The Breadcrumb component renders the breadcrumb navigation trail based on the Page object (Root.Page.Breadcrumbs).

It supports:

Full breadcrumb trail on desktop (with / separators)

A “back” experience on mobile (shows a back arrow that navigates to the previous breadcrumb link)

Current page label (last breadcrumb) as non-clickable and aria-current="page"

Inputs (model contract)

Model shape (storefront example)

This component does not rely on component settings for its content.
It pulls its data from:

Root.Page.Breadcrumbs

Page object example (storefront)

{
  "type": "Sample page type",
  "metas": {
    "isoLang": "en-US",
    "title": "Sample page title",
    "metaDescription": "",
    "metaKeywords": ""
  },
  "data": {
    "darkmode": false
  },
  "breadcrumbs": [
    {
      "label": "Sample label",
      "href": "/sample"
    },
    {
      "label": "Sample label"
    }
  ]
}

Each breadcrumb item can contain:

label (string) — required

href (string) — required for all non-last items (because they are rendered as links)

The last breadcrumb is treated as the current page.

It may omit href (as in your example), because it is rendered as a <span>.

JavaScript

Global object

The Breadcrumb component includes a JS file for consistency with the theme’s component structure, but it does not implement any client-side behavior.

Typical shape:

Functions

None.

Advice

Keep Breadcrumb logic in Liquid. It’s purely presentational and already driven by Root.Page.Breadcrumbs.

Only add JavaScript here if you introduce new interactive requirements (e.g., collapsing breadcrumbs, dynamic breadcrumb generation on client-side routing). Otherwise, extra JS would be unnecessary complexity and can introduce accessibility regressions.

Dependencies

None (pure Liquid rendering + Tailwind classes).

Notes

The Breadcrumb is a global component: it is rendered by the theme layout on every page (as part of the overall page shell).
The user does not need to add it manually per page as a component.

Breadcrumb content comes from Root.Page.Breadcrumbs, so the trail is controlled by the Page object rather than component settings.

If intermediate breadcrumbs are missing href, those items cannot be rendered as proper links (desktop) and the mobile “back” link may break.

Extras

Template behavior (Liquid + Alpine)

Render conditions

Renders only if Root.Page.Breadcrumbs exists and has items.

If breadcrumbs.size == 1, the entire breadcrumb section is hidden.

Desktop behavior (LG and up)

Renders each non-last breadcrumb as a link.

Shows / separators between items.

The last breadcrumb is rendered as:

uppercase, bold

aria-current="page"

Mobile behavior

Shows a back arrow link to the previous breadcrumb (second-to-last item).

This happens when the loop is at forloop.index == second_last_index.

Only the back arrow is shown on mobile (lg:hidden), while the full trail is hidden (hidden lg:inline).

Breadcrumb

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Page object example (storefront)#

Required breadcrumb fields#

JavaScript#

Global object#

Functions#

Advice#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Render conditions#

Desktop behavior (LG and up)#

Mobile behavior#