Taiga UI 5 is out!

TabBar ADDON-MOBILE

GitHub

On this page

Component for creating mobile navigation.

Buttons 

    
      
    

      
      
    

  
    
      <nav
    tuiTabBar
    class="tabs"
    [(activeItemIndex)]="activeItemIndex"
>
    @for (item of items; track item) {
        <button
            tuiTabBarItem
            type="button"
            [badge]="item.badge"
            [icon]="item.icon"
            (click)="onClick(item)"
        >
            {{ item.text }}
        </button>
    }
</nav>

    

      
      
    

  
    
      .tabs {
    min-inline-size: 25rem;
    padding-block-end: env(safe-area-inset-bottom);
}

Links

If you use routerLink you must also add routerLinkActive directive. 
    
      
    

      
      
    

  
    
      <nav tuiTabBar>
    <a
        icon="@tui.ellipsis"
        routerLinkActive
        tuiTabBarItem
        [routerLink]="routes.Breadcrumbs"
    >
        Breadcrumbs
    </a>
    <a
        icon="@tui.code"
        routerLinkActive
        tuiTabBarItem
        [routerLink]="routes.Pagination"
    >
        Pagination
    </a>
    <a
        icon="@tui.terminal"
        routerLinkActive
        tuiTabBarItem
        [routerLink]="routes.Stepper"
    >
        Stepper
    </a>
    <a
        icon="@tui.minus"
        routerLinkActive
        tuiTabBarItem
        [routerLink]="routes.TabBar"
    >
        TabBar
    </a>
    <a
        icon="@tui.menu"
        routerLinkActive
        tuiTabBarItem
        [routerLink]="routes.Tabs"
    >
        Tabs
    </a>
</nav>

Customization 

    
      
    

      
      
    

  
    
      <nav
    tuiTabBar
    class="tabs"
>
    @for (item of items; track item) {
        <button
            tuiTabBarItem
            type="button"
            [icon]="item.icon"
        >
            {{ item.text }}
        </button>
    }
</nav>

    

      
      
    

  
    
      .tabs {
    min-inline-size: 25rem;
    color: var(--tui-text-action);

    --tui-active-color: var(--tui-background-accent-2);
}

Skeleton

When there are no TabBarItem children, the component shows skeleton for 4 items 

    
      
    

      
      
    

  
    
      <p>
    <button
        size="m"
        tuiButton
        type="button"
        (click)="load$.next()"
    >
        Reload
    </button>
</p>
<nav tuiTabBar>
    @for (item of items$ | async; track item) {
        <button
            tuiTabBarItem
            type="button"
            [icon]="item.icon"
        >
            {{ item.text }}
        </button>
    }
</nav>

iOS Liquid glass

To enable the liquid-glass mode on iOS devices, specify the option in provideTaiga({apis: {liquidGlass: true}})

    
      
    

      
      
    

  
    
      <nav
    tuiTabBar
    [(activeItemIndex)]="activeItemIndex"
>
    @for (item of items; track item) {
        <button
            tuiTabBarItem
            type="button"
            [badge]="item.badge"
            [icon]="item.icon"
            (click)="onClick(item)"
        >
            {{ item.text }}
        </button>
    }
</nav>

    

      
      
    

  
    
      :host {
    inline-size: 100%;
}

iOS Liquid glass fullwidth

With more than three items the tab bar stretches to the full width of the screen; with fewer it stays a compact, centered pill. 

    
      
    

      
      
    

  
    
      <nav
    tuiTabBar
    [(activeItemIndex)]="activeItemIndex"
>
    @for (item of items; track item) {
        <button
            tuiTabBarItem
            type="button"
            [icon]="item.icon"
        >
            {{ item.text }}
        </button>
    }
</nav>

    

      
      
    

  
    
      :host {
    inline-size: 100%;
}
GitHub StackBlitz