Migrating from tgBreadcrumbs (tg-light)

Follow migrating from tgBreadcrumbs, then set data-tg-theme="tg-light" on the <nav> or any ancestor to keep the tgBreadcrumbs look: teal links, a 48px line height, a 2px gap either side of the separator and the bottom margin.

Your <ol> stays. Move tgBreadcrumbs off it and put tg2Breadcrumbs on a <nav> around it. If you already have a <nav> wrapper, put it there rather than adding a second one.

Selector and the current page

Before

Motors
Cars
Toyota

After

<!-- Before -->
<nav aria-label="Breadcrumb">
    <ol tgBreadcrumbs>
        <li tgBreadcrumbsItem><a routerLink="/motors">Motors</a></li>
        <li tgBreadcrumbsItem><a routerLink="/motors/cars">Cars</a></li>
        <li tgBreadcrumbsItem>Toyota</li>
    </ol>
</nav>

<!-- After: tg2Breadcrumbs on your existing <nav>, data-tg-theme keeps the tgBreadcrumbs look -->
<nav tg2Breadcrumbs includesCurrentPage data-tg-theme="tg-light">
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/motors">Motors</a></li>
        <li tg2BreadcrumbsItem><a routerLink="/motors/cars">Cars</a></li>
        <li tg2BreadcrumbsItem>Toyota</li>
    </ol>
</nav>

Truncated and title

truncated works as before, showing "…", and is ignored on the last item. Text with fewer than 6 characters is no longer truncated, as it wouldn't get shorter. The last item is shown in full, as before. Move title from the <li> onto its link.

Before

After

<!-- Before -->
<ol tgBreadcrumbs>
    <li tgBreadcrumbsItem><a routerLink="/">Home</a></li>
    <li tgBreadcrumbsItem [truncated]="true" title="Vintage bookcases">
        <a routerLink="/furniture/bookcases">Vintage bookcases</a>
    </li>
    <li tgBreadcrumbsItem>Oak</li>
</ol>

<!-- After -->
<nav tg2Breadcrumbs includesCurrentPage data-tg-theme="tg-light">
    <ol>
        <li tg2BreadcrumbsItem><a routerLink="/">Home</a></li>
        <li tg2BreadcrumbsItem truncated>
            <a routerLink="/furniture/bookcases" title="Vintage bookcases">Vintage bookcases</a>
        </li>
        <li tg2BreadcrumbsItem>Oak</li>
    </ol>
</nav>