Taiga UI 5.0 is out!

Breadcrumbs KIT

Examples API GitHub

On this page

Navigation element that shows a path from root page to the current

Basic

Selects Multi With tags Current Selects Multi With tags Current 
    
      
    

      
      
    

  
    
      <tui-breadcrumbs>
    @for (item of items; track item) {
        <a
            *tuiItem
            tuiLink
            [routerLink]="item.routerLink"
        >
            {{ item.caption }}
        </a>
    }
</tui-breadcrumbs>

<tui-breadcrumbs
    size="l"
    class="tui-space_top-2"
>
    @for (item of items; track item) {
        <a
            *tuiItem
            tuiLink
            [routerLink]="item.routerLink"
        >
            {{ item.caption }}
        </a>
    }
</tui-breadcrumbs>

Overflow

Truncate Using .text-truncate() mixin

///

Fade Combining .text-truncate() mixin with Fade directive

///

Scroll Putting Fade directive on entire component

///

Collapse Using itemsLimit: number

/
/
/
    
      
    

      
      
    

  
    
      <h3 tuiTitle>
    <strong>Truncate</strong>
    <span tuiSubtitle>
        Using
        <code>.text-truncate()</code>
        mixin
    </span>
</h3>
<tui-breadcrumbs>
    @for (item of items; track item) {
        <button
            *tuiItem
            tuiHintOverflow
            tuiLink
            type="button"
            class="link"
            [class.link_last]="$last"
        >
            {{ item }}
        </button>
    }
</tui-breadcrumbs>
<hr />
<h3 tuiTitle>
    <strong>Fade</strong>
    <span tuiSubtitle>
        Combining
        <code>.text-truncate()</code>
        mixin with
        <code>
            <a
                tuiLink
                [routerLink]="fade"
            >
                Fade
            </a>
        </code>
        directive
    </span>
</h3>
<tui-breadcrumbs>
    @for (item of items; track item) {
        <button
            *tuiItem
            tuiFade
            tuiHintOverflow
            tuiLink
            type="button"
            class="link"
            [class.link_last]="$last"
        >
            {{ item }}
        </button>
    }
</tui-breadcrumbs>
<hr />
<h3 tuiTitle>
    <strong>Scroll</strong>
    <span tuiSubtitle>
        Putting
        <code>
            <a
                tuiLink
                [routerLink]="fade"
            >
                Fade
            </a>
        </code>
        directive on entire component
    </span>
</h3>
<tui-breadcrumbs tuiFade>
    @for (item of items; track item) {
        <button
            *tuiItem
            tuiLink
            type="button"
            [class.link_last]="$last"
        >
            {{ item }}
        </button>
    }
</tui-breadcrumbs>
<hr />
<h3 tuiTitle>
    <strong>Collapse</strong>
    <span tuiSubtitle>
        Using
        <code>itemsLimit: number</code>
    </span>
</h3>
<tui-breadcrumbs [itemsLimit]="10">
    @for (item of items; track item) {
        <button
            *tuiItem
            tuiLink
            type="button"
            [class.link_last]="$last"
        >
            {{ item }}
        </button>
    }
</tui-breadcrumbs>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: block;
    max-inline-size: 30rem;
}

hr,
h3 {
    margin: 1rem 0;
}

hr {
    block-size: 1px;
    background: var(--tui-border-normal);
    border: 0;
}

.link {
    .text-truncate();

    &_last {
        font-weight: bold;
        color: var(--tui-text-primary);
    }
}
GitHub StackBlitz