Breadcrumbs

import { TgBreadcrumbsComponent, TgBreadcrumbsItemDirective } from '@trademe/tangram';

To help our users to know where they are, use breadcrumbs on all pages deeper than the homepage or landing pages.

Place breadcrumbs at the top of the page, underneath the header.

First breadcrumb item
Second breadcrumb item
Third breadcrumb item
Current breadcrumb item

Code

<ol
    tgBreadcrumbs>
    <li
        tgBreadcrumbsItem>
        <a
            href="#">
            Top level category
        </a>
    </li>
    <li
        tgBreadcrumbsItem
        truncated>
        <a
            href="#">
            Second level category
        </a>
    </li>
    <li
        tgBreadcrumbsItem>
        <a
            href="#">
            Third level category
        </a>
    </li>
    <li
        tgBreadcrumbsItem>
        Current category
    </li>
</ol>

Breadcrumbs

Example