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.

Overview

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.

Example

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

Home
Blog
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>
</li>
{{ /nav:breadcrumbs }}
</ul>

Parameters

include_home

boolean

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

reverse

boolean

Reverse the order of links.

trim

boolean *true*

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

Variables

Variable Type Description

is_current

boolean

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

data/content

mixed

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 →