Taiga UI 5.0 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;
    margin-block-end: 1rem;
}

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