Breadcrumbs

Show Breadcrumbs#

Put {{ breadcrumbs }} where the trail should appear:

{{ breadcrumbs }}

TemplateX renders semantic breadcrumb markup:

<nav aria-label="Breadcrumb">  <ol>    <li><a href="/">Home</a></li>    <li><span aria-hidden="true">/</span><span aria-current="page">Current page</span></li>  </ol></nav>

The exact items come from WordPress. Pages use parent pages, posts use categories, product pages use the WooCommerce shop and product categories, and taxonomy archives use parent terms.

Change The Divider#

Use divider when the default slash is not right for the design:

{{ breadcrumbs divider=">" }}

Hide dividers with divider="false":

{{ breadcrumbs divider="false" }}

Add Classes#

The generated markup accepts class hooks for each visible part:

{{ breadcrumbs  class="breadcrumbs"  list_class="breadcrumbs-list"  item_class="breadcrumbs-item"  link_class="breadcrumbs-link"  current_class="is-current"  divider_class="breadcrumbs-divider"}}

class goes on the <nav>. list_class goes on the <ol>. item_class goes on each <li>. current_class is added to the current <li>.

Rename Home#

Change the first item with home:

{{ breadcrumbs home="Start" }}

Hide the home item with home="false":

{{ breadcrumbs home="false" }}

Control The Trail#

Most templates do not need these options, but they are useful when a design wants a shorter trail.

{{ breadcrumbs include_current="false" }}{{ breadcrumbs include_terms="false" }}{{ breadcrumbs include_post_type="false" }}{{ breadcrumbs taxonomy="project_category" }}{{ breadcrumbs taxonomy="none" }}

taxonomy="project_category" chooses the taxonomy branch for singular posts or custom post types. taxonomy="none" removes taxonomy items.

Write Your Own Markup#

Use breadcrumbs:items when you want total control over the HTML:

<nav aria-label="Breadcrumb">  <ol class="breadcrumbs">    {{ breadcrumbs:items }}      <li class="{{ is_current && 'is-current' }}">        {{ if !is_first }}          <span aria-hidden="true">/</span>        {{ /if }}        {{ if is_linked }}          <a href="{{ url }}">{{ title }}</a>        {{ else }}          <span aria-current="page">{{ title }}</span>        {{ /if }}      </li>    {{ /breadcrumbs:items }}  </ol></nav>

Inside the loop, values such as {{ title }}, {{ url }}, {{ is_current }}, and {{ is_first }} belong to the current breadcrumb item.

You can also give the item a name:

{{ breadcrumbs:items as crumb }}  <a href="{{ crumb.url }}">{{ crumb.title }}</a>{{ /breadcrumbs:items }}

Values#

Breadcrumb values are value tags. Do not add closing tags to them.

{{ breadcrumb }}, {{ breadcrumps }}, and {{ breadcrump }} are accepted aliases, but {{ breadcrumbs }} is the recommended spelling.