Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

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.

A troll pointing a teaching stick

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>

<ul class="breadcrumbs">

  <s:nav:breadcrumbs>

  <li

    @if ($is_current) class="current" @endif

  >

    <a href="{{ $url }}">{{ $title }}</a>

  </li>

  </s: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.