Taiga UI 5 is out!

AppBar LAYOUT

GitHub

On this page

Component for the main app header

Mobile — medium size

iOS

Taiga UI
Taiga UI — Components library
Taiga UI

Android

Taiga UI
Taiga UI — Components library
Taiga UI 
    
      
    

      
      
    

  
    
      <h3>iOS</h3>

<section tuiPlatform="ios">
    <tui-app-bar>
        <button
            tuiButton
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI — Components library
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        Taiga UI
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>

        <div>
            <progress
                size="s"
                tuiProgressBar
                [max]="100"
                [value]="35"
            ></progress>
        </div>
    </tui-app-bar>
</section>

<h3 class="tui-space_top-8">Android</h3>
<section tuiPlatform="android">
    <tui-app-bar>
        Taiga UI
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI — Components library
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            iconStart="@tui.x"
            title="Settings"
            tuiIconButton
            tuiSlot="start"
            type="button"
        ></button>
        Taiga UI
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>
    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>

        <progress
            size="s"
            tuiProgressBar
            [max]="100"
            [value]="35"
        ></progress>
    </tui-app-bar>
</section>

    

      
      
    

  
    
      tui-app-bar {
    box-shadow: var(--tui-shadow-small);
    inline-size: 20rem;
    margin-block-end: 1rem;
}

Desktop — large size

Taiga UI 
    
      
    

      
      
    

  
    
      <tui-app-bar size="l">
    <button
        iconStart="@tui.chevron-left"
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Action
    </button>
    Taiga UI
</tui-app-bar>

<tui-app-bar size="l">
    <label tuiTitle>
        Taiga UI
        <span tuiSubtitle>Components library</span>
    </label>
    <button
        tuiButton
        tuiSlot="end"
        type="button"
    >
        Action
    </button>
</tui-app-bar>

<tui-app-bar size="l">
    <button
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Action
    </button>
    <label tuiTitle>
        Taiga UI is a very long title that should fade away
        <span tuiSubtitle>Components library</span>
    </label>
    <button
        iconStart="@tui.x"
        tuiIconButton
        tuiSlot="end"
        type="button"
    >
        Close
    </button>
</tui-app-bar>

<tui-app-bar size="l">
    <button
        iconStart="@tui.chevron-left"
        tuiIconButton
        tuiSlot="start"
        type="button"
    >
        Back
    </button>
    <progress
        size="s"
        tuiProgressBar
        [max]="100"
        [style.width.rem]="10"
        [value]="35"
    ></progress>
    <button
        tuiButton
        tuiSlot="end"
        type="button"
    >
        Action
    </button>
</tui-app-bar>

    

      
      
    

  
    
      tui-app-bar {
    box-shadow: var(--tui-shadow-small);
    inline-size: 30rem;
    margin-block-end: 1rem;
}

Variants

Customization

Taiga UI

Centered Android

    
      
    

      
      
    

  
    
      <h3>Customization</h3>
<tui-app-bar>
    <progress
        size="s"
        tuiProgressBar
        [max]="100"
        [value]="35"
    ></progress>
</tui-app-bar>

<tui-app-bar class="gray">
    <button
        appearance=""
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Back
    </button>
    <label tuiTitle>
        <span tuiSubtitle>More interesting title</span>
        Taiga UI
    </label>
    <button
        appearance=""
        tuiButton
        tuiSlot="end"
        type="button"
    >
        Accept
    </button>
</tui-app-bar>

<tui-app-bar class="black">
    <button
        appearance=""
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Cancel
    </button>
    Taiga UI
    <button
        appearance=""
        iconStart="@tui.settings"
        title="Settings"
        tuiIconButton
        tuiSlot="end"
        type="button"
    ></button>
</tui-app-bar>

<h3 class="tui-space_top-8">Centered Android</h3>
<section tuiPlatform="android">
    <tui-app-bar>
        <label tuiTitle>Taiga UI</label>
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        <label
            tuiFade
            tuiTitle
        >
            Taiga UI — Components library
        </label>
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            iconStart="@tui.x"
            title="Settings"
            tuiIconButton
            tuiSlot="start"
            type="button"
        ></button>
        <label tuiTitle>Taiga UI</label>
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>
</section>

    

      
      
    

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

tui-app-bar {
    box-shadow: var(--tui-shadow-small);
    inline-size: 20rem;
    margin-block-end: 1rem;
}

.gray {
    box-shadow: none;
    background: var(--tui-background-base-alt);

    button {
        color: var(--tui-text-primary);
    }
}

.black {
    color: var(--tui-background-base);
    background: var(--tui-text-primary);

    button {
        color: var(--tui-status-warning);
    }
}

section tui-app-bar [tuiTitle] {
    .center-all();

    text-align: center;
}

Dialog 

    
      
    

      
      
    

  
    
      <button
    size="m"
    tuiButton
    type="button"
    (click)="open(template)"
>
    Show
</button>

<ng-template
    #template
    let-observer
>
    <tui-app-bar tuiAppBarSize>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
            [disabled]="!step"
            (click)="step = step - 1"
        >
            Back
        </button>
        <progress
            max="5"
            size="s"
            tuiProgressBar
            [style.width.rem]="8"
            [value]="step"
        ></progress>
        <button
            tuiButton
            tuiSlot="end"
            type="button"
            (click)="observer.complete()"
        >
            Close
        </button>
    </tui-app-bar>
    <h2 tuiHeader="h3">
        <span tuiTitle>I'm a stepper</span>
    </h2>
    <p
        appearance="floating"
        tuiCardLarge
    >
        Step {{ step }}
    </p>
    <button
        tuiButton
        type="button"
        [disabled]="step === 5"
        (click)="step = step + 1"
    >
        Next
    </button>
</ng-template>

Dynamic header

Title 1
Subtitle
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title 2
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title 3 Long title
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
    
      
    

      
      
    

  
    
      <tui-segmented [(activeItemIndex)]="activeItemIndex">
    <button type="button">IOS</button>
    <button type="button">Android</button>
</tui-segmented>

<div
    tuiDynamicHeaderContainer
    class="container"
    [tuiPlatform]="activeItemIndex ? 'android' : 'ios'"
>
    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <div tuiDynamicHeader></div>
    </tui-app-bar>
    <div class="content">
        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>
                Title 1
                <div tuiSubtitle>Subtitle</div>
            </h6>
        </div>
        @for (_ of '-'.repeat(7); track $index) {
            <div tuiCell>
                <div
                    appearance="primary"
                    tuiAvatar="@tui.star"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }

        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>Title 2</h6>
        </div>
        @for (_ of '-'.repeat(15); track $index) {
            <div tuiCell>
                <div
                    appearance="secondary"
                    tuiAvatar="@tui.heart"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }

        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>Title 3 Long title</h6>
        </div>
        @for (_ of '-'.repeat(15); track $index) {
            <div tuiCell>
                <div
                    appearance="secondary"
                    tuiAvatar="@tui.heart"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }
    </div>
</div>

    

      
      
    

  
    
      .container {
    max-block-size: 30rem;
    inline-size: 20rem;
    overflow: scroll;
    overscroll-behavior: none;
}

tui-app-bar {
    position: sticky;
    z-index: 1;
    inset-block-start: -1px;
    background: var(--tui-background-base);
}

tui-segmented {
    inline-size: 6rem;
    inline-size: fit-content;
    margin-block-end: 1rem;
}

.content > [tuiHeader] {
    padding: 0 1rem;
}

iOS Liquid glass

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

      
      
    

  
    
      <section tuiPlatform="ios">
    <tui-app-bar>
        <button
            tuiButton
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI — Components library
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        Taiga UI
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>

        <div>
            <progress
                size="s"
                tuiProgressBar
                [max]="100"
                [value]="35"
            ></progress>
        </div>
    </tui-app-bar>
</section>

    

      
      
    

  
    
      tui-app-bar {
    inline-size: 20rem;
    margin-block-end: 1rem;
}

section {
    padding: 1rem;
    margin: -1rem;
    overflow: hidden;
}

Liquid glass dynamic header

Title 1
Subtitle
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title 2
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title 3 Long title
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
Title
Description
    
      
    

      
      
    

  
    
      <div
    #container
    tuiDynamicHeaderContainer
    tuiPlatform="ios"
    waIntersectionRootMargin="-120px 0px 1000000% 0px"
    class="container"
    [class.tui-liquid-glass_blur]="blur()"
>
    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <div tuiDynamicHeader></div>
    </tui-app-bar>
    <div class="content">
        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6
                tuiTitle
                (waIntersectionObservee)="blur.set(!$event[0]?.isIntersecting)"
            >
                Title 1
                <div tuiSubtitle>Subtitle</div>
            </h6>
        </div>
        @for (_ of '-'.repeat(7); track $index) {
            <div tuiCell>
                <div
                    appearance="primary"
                    tuiAvatar="@tui.star"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }

        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>Title 2</h6>
        </div>
        @for (_ of '-'.repeat(15); track $index) {
            <div tuiCell>
                <div
                    appearance="secondary"
                    tuiAvatar="@tui.heart"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }

        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>Title 3 Long title</h6>
        </div>
        @for (_ of '-'.repeat(15); track $index) {
            <div tuiCell>
                <div
                    appearance="secondary"
                    tuiAvatar="@tui.heart"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }
    </div>
</div>

    

      
      
    

  
    
      .container {
    max-block-size: 30rem;
    inline-size: 20rem;
    overflow: scroll;
    overscroll-behavior: none;
}

tui-app-bar {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    margin-block-end: 0.75rem;
}

Color background

On iOS, a progressive blur effect should be enabled when the container is scrolled. To activate it, apply the tui-liquid-glass_blur class to the tui-app-bar component. Additionally, if the background is colored, you must provide it via the --tui-appbar-background CSS variable to ensure correct fading and a proper "liquid glass" effect simulation.
Backgrounds

#2f3f5b

#3a3f66

#5a2f3f

#3f4e37

#5a3851 

    
      
    

      
      
    

  
    
      <div
    tuiDynamicHeaderContainer
    tuiPlatform="ios"
    waIntersectionRootMargin="-120px 0px 1000000% 0px"
    class="container"
>
    <tui-app-bar
        [attr.tuiTheme]="color() || mode() ? 'dark' : 'light'"
        [class.tui-liquid-glass_blur]="blur()"
        [style.--tui-appbar-background]="color()"
    >
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <div
            tuiDynamicHeader
            tuiHeader="h6"
        ></div>
    </tui-app-bar>
    <div class="content">
        <div
            tuiHeader="h4"
            (waIntersectionObservee)="blur.set(!$event[0]?.isIntersecting)"
        >
            <h6
                *tuiDynamicHeaderAnchor
                tuiTitle="l"
            >
                Backgrounds
            </h6>
        </div>
        <div
            waIntersectionObserver
            waIntersectionRootMargin="0px 0px -100% 0px"
            waIntersectionThreshold="0"
        >
            @for (item of colors; track item) {
                <div
                    class="block"
                    [style.background-color]="item"
                    (waIntersectionObservee)="onIntersection(!!$event[0]?.isIntersecting, item)"
                >
                    <h3
                        tuiHeader="h5"
                        tuiTheme="dark"
                    >
                        {{ item }}
                    </h3>
                </div>
            }
        </div>
    </div>
</div>

    

      
      
    

  
    
      .container {
    max-block-size: 30rem;
    inline-size: 20rem;
    overflow: scroll;
    overscroll-behavior: none;
}

tui-app-bar {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    margin-block-end: 0.75rem;
}

.content {
    padding: 0;

    > [tuiHeader] {
        padding: 1rem;
    }
}

.block {
    block-size: 20rem;
}
GitHub StackBlitz