Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

For a software dev like me who has no idea how to create a cute hand-drawn dashed line, this course just 100% works.

— Ira Zayats, Developer

Nav:Breadcrumbs Tag

Breadcrumbs are a common form of site navigation designed to give the user a view of where the current page is in the parent/child hierarchy. Much like the crumbs left by a certain little German boy — they lead from wherever you are, all the way back home.


This tag looks at the current URL and look for any entries that match each segment. Let's say you visit /italian/articles/dance. The logic works like this:

  1. Looks for an entry with a URL of /italian/articles/dance.
  2. Pops the last segment off (dance) and look for an entry with a url of /italian/articles
  3. Do the same for /italian
  4. If include_home is set to true, look an entry with a url of /.

If any of the URLs don't match an entry in the current site, they will be skipped, so be sure to create translations for parent pages you if you're working on a multisite.

Hot Tip!

Breadcrumbs don't follow structures, they follow the current URL hierarchy.


Here's an example of what breadcrumbs might look like, as well as a code example in use.

How to Dress Like David Hasselhoff
These crumbs are delicious.
<ul class="breadcrumbs">
{{ nav:breadcrumbs }}
<li{{ if is_current }} class="current"{{ /if }}>
<a href="{{ url }}">{{ title }}</a>
{{ /nav:breadcrumbs }}




Include the home page as the first breadcrumb. Default: true.



Reverse the order of links.


boolean *true*

Trim the whitespace from each iteration of the loop. Default: true.


Variable Type Description



true if current page is the URL being viewed. Useful for adding active state classes in your HTML.



All data and variables are available for each item in the list.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →