App Topbar - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

<div class="ts-app-topbar">
    <div class="start">
        <div class="item is-text">Application</div>
    </div>
    <div class="end">
        <button class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </button>
        <button class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </button>
    </div>
</div>

Introduction

The topbar can be used with App Layout.

Structure

Positions

A topbar is divided into three sections: start, center, and end.

<div class="ts-app-topbar">
    <div class="start">
        <button class="item">
            <span class="ts-icon is-chevron-left-icon"></span>
        </button>
    </div>
    <div class="center">
        <div class="item is-text">My Album</div>
    </div>
    <div class="end">
        <button class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </button>
        <button class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </button>
    </div>
</div>

Text Item

A topbar can have text items to display the application's title.

<div class="ts-app-topbar">
    <div class="start">
        <div class="item is-text">PDF Viewer</div>
    </div>
    <div class="end">
        <button class="item">
            <span class="ts-icon is-circle-question-icon"></span>
        </button>
    </div>
</div>

Content

A topbar can have additional content or menus.

<div class="ts-app-topbar">
    <div class="start">
        <button class="item">
            <span class="ts-icon is-arrow-left-icon"></span>
        </button>
    </div>
    <div class="end">
        <button class="item">
            <span class="ts-icon is-magnifying-glass-icon"></span>
        </button>
        <button class="item">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </button>
    </div>
    <div class="content">
        <div class="ts-header is-large">My Files</div>
    </div>
</div>

Compositions

Dropdown

A Dropdown can show extra functions at the end of the topbar.

<div class="ts-app-topbar">
    <div class="start">
        <div class="item is-text">Cheat Engine</div>
    </div>
    <div class="end">
        <button class="item" data-dropdown="dropdown">
            <span class="ts-icon is-ellipsis-vertical-icon"></span>
        </button>
    </div>
</div>
<div class="ts-dropdown" id="dropdown" data-position="bottom-end">
    <button class="item">Check Updates</button>
    <button class="item">Help</button>
    <button class="item">About</button>
</div>