Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

This course is the most refreshing take on teaching design that I've come across.

— Mikaël Sévigny, 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 →
Hello there! Are you looking for the Statamic v2 documentation?