Breadcrumbs Beta

Usage

Project a link into each item, usually an <a routerLink>. Any link works, including queryParams or your own link directives. This trail ends with the current page, so it sets includesCurrentPage (see Current page).

<nav tg2Breadcrumbs includesCurrentPage>
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/motors">First</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/motors/cars">Second</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/motors/cars/toyota">Third</a></li>
        <li tg2BreadcrumbsItem>Current page</li>
    </ol>
</nav>

When not to use

Only use breadcrumbs for the page's own location, once per page. For a category path inside a card or a list item, use plain links: each tg2Breadcrumbs is a navigation landmark.

Current page

By default no item is marked as the current page, as with tgBreadcrumbs. Use this for an ancestors-only trail, where the current page isn't in the trail and every item can be a link, e.g. on a listing page.

<!-- Ancestors only (the default): every item is a link, none is the current page -->
<nav tg2Breadcrumbs>
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/">Home</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property">Property</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/auckland">Auckland</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/auckland/rodney">Rodney</a></li>
    </ol>
</nav>

When the trail ends with the current page, set includesCurrentPage. The last item then gets aria-current="page": project it as plain text, not a link. The last item never has a separator, either way. The Usage example sets it.

Truncation

Set truncated to shorten an item's link to its first 5 characters and "…" when space is tight, e.g. "Cars & trucks" shows "Cars…". Text with fewer than 6 characters isn't truncated, as it wouldn't get shorter. Screen readers still read the full text. Add a native title to the link so mouse users can see the full text on hover. It's ignored on the last item; only truncate middle items so the trail keeps some context.

The tg-light and tg-dark themes show "…" only, as tgBreadcrumbs does.

<nav tg2Breadcrumbs includesCurrentPage>
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/motors">Motors</a></li>
        <li tg2BreadcrumbsItem truncated>
            <a routerLink="/motors/cars" title="Cars & trucks">Cars & trucks</a>
        </li>
        <li tg2BreadcrumbsItem><a routerLink="/motors/cars/toyota">Toyota</a></li>
        <li tg2BreadcrumbsItem>Corolla</li>
    </ol>
</nav>

Last item

The last item is always capped at 30 characters and "…", so a long page title can't take over the trail. It gets a title with its full text, and screen readers still read it in full. There's nothing to set; truncated is ignored on it. The tg-light and tg-dark themes show it in full, as tgBreadcrumbs does.

<nav tg2Breadcrumbs includesCurrentPage>
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/motors">Motors</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/motors/cars">Cars</a></li>
        <!-- Shows "2019 Toyota Corolla GX Hatchba…" -->
        <li tg2BreadcrumbsItem>2019 Toyota Corolla GX Hatchback 1.8L Automatic</li>
    </ol>
</nav>

Automatic

Set autoTruncate on the <nav> to keep the trail on one line. When it doesn't fit, middle items are truncated one at a time from the left until it does, and they grow back when there's room. The first and last items are never truncated, so a trail that still doesn't fit is cut off at the edge of the <nav>, and items with fewer than 6 characters (like "Sale" below) are never truncated. Items you've set truncated on stay truncated.

An automatically truncated item gets a title with its full text, so there's nothing to add for the tooltip. A title on the link takes precedence. The <nav> needs its width from its container: block, or flex: 1 in a row. Server rendering shows the full trail, kept inside the <nav> (cut off at its edge) until it's measured in the browser. Manually truncated items are server rendered as they look in the browser.

Drag the corner of the box to resize it.

<nav tg2Breadcrumbs autoTruncate>
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/">Home</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property">Property</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/residential">Residential</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/residential/sale">Sale</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/residential/sale/auckland">Auckland</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/residential/sale/auckland/north-shore-city">North Shore City</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/property/residential/sale/auckland/north-shore-city/browns-bay">Browns Bay</a></li>
    </ol>
</nav>

In a row, give the <nav>flex: 1 so its neighbours keep their width. The trail stays inside the <nav>: until it's measured in the browser, and if it's still too long once it is, it's cut off at the edge of the <nav> rather than running under its neighbours.

<div class="header-row">  <!-- display: flex -->
    <nav tg2Breadcrumbs autoTruncate class="header-row__trail">  <!-- flex: 1 -->
        <ol>…</ol>
    </nav>
    <button tg2Button>Watchlist</button>
</div>

Accessibility

• tg2Breadcrumbs makes the <nav> a landmark labelled "Breadcrumb". Set aria-label on the <nav> to change the label.
• You write the <ol> and its <li> items, so native list semantics are kept and screen readers announce each item's position, e.g. "item 2 of 4". An item that isn't directly inside an <ol> throws an error.
• With includesCurrentPage, the last item gets aria-current="page": project it as plain text, not a link. Without it, no item is marked, which is right for an ancestors-only trail where the current page isn't listed.
• The separator between items is aria-hidden and not read out.
• Links are always underlined in the tg2 themes, so they don't rely on colour alone. The tg-light and tg-dark themes underline them on hover, as tgBreadcrumbs does.
• A truncated item is still read in full by screen readers. A title tooltip only helps mouse users: keyboard and touch users only see the first 5 characters, so truncate sparingly. The last item is capped at 30 characters, with its full text in a title.

API

nav[tg2Breadcrumbs]

Labels the <nav> "Breadcrumb", and follows the nearest data-tg-theme on the <nav> or an ancestor. There's no theme input.

li[tg2BreadcrumbsItem]

Write items directly inside the <ol>, and project the item's link or text. The last li[tg2BreadcrumbsItem] has no separator, and is the current page when the trail sets includesCurrentPage.