Sidebar
Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
Topbar
Content
<div class="ts-app-layout is-horizontal">
<div class="cell">
<div class="ts-content">Sidebar</div>
</div>
<div class="cell is-fluid is-vertical">
<div class="cell">
<div class="ts-content">Topbar</div>
</div>
<div class="cell">
<div class="ts-content">Content</div>
</div>
</div>
</div>Introduction
An app layout fills the parent container with a width and height of 100%.
It is commonly used with App Sidebar and App Navbar.
Variations
An app layout can arrange its cells horizontally.
Left
Center
Right
<div class="ts-app-layout is-horizontal">
<div class="cell is-fluid">
<div class="ts-content">Left</div>
</div>
<div class="cell is-fluid">
<div class="ts-content">Center</div>
</div>
<div class="cell is-fluid">
<div class="ts-content">Right</div>
</div>
</div>An app layout can arrange its cells vertically.
Top
Middle
Bottom
<div class="ts-app-layout is-vertical">
<div class="cell">
<div class="ts-content">Top</div>
</div>
<div class="cell">
<div class="ts-content">Middle</div>
</div>
<div class="cell">
<div class="ts-content">Bottom</div>
</div>
</div>An app layout can fill the entire screen, not just the container.
Content
<div class="ts-app-layout is-horizontal is-fullscreen">
<div class="cell">
<div class="ts-content">Content</div>
</div>
</div>Cell Variations
A cell can take up the remaining space in a layout.
Default Cell
Fluid Cell
<div class="ts-app-layout is-horizontal">
<div class="cell">
<div class="ts-content">Default Cell</div>
</div>
<div class="cell is-fluid">
<div class="ts-content">Fluid Cell</div>
</div>
</div>A cell can arrange its nested cells horizontally.
Top
Left
Center
Right
<div class="ts-app-layout is-vertical">
<div class="cell">
<div class="ts-content">Top</div>
</div>
<div class="cell is-horizontal">
<div class="cell is-fluid">
<div class="ts-content">Left</div>
</div>
<div class="cell is-fluid">
<div class="ts-content">Center</div>
</div>
<div class="cell is-fluid">
<div class="ts-content">Right</div>
</div>
</div>
</div>A cell can arrange its nested cells vertically.
Left
Top
Middle
Bottom
<div class="ts-app-layout is-horizontal">
<div class="cell">
<div class="ts-content">Left</div>
</div>
<div class="cell is-vertical is-fluid">
<div class="cell">
<div class="ts-content">Top</div>
</div>
<div class="cell">
<div class="ts-content">Middle</div>
</div>
<div class="cell">
<div class="ts-content">Bottom</div>
</div>
</div>
</div>A cell can be scrollable when the content is overflowing.
Header
Fusce non enim egestas, lobortis diam et, congue felis.
Rhoncus est sed laoreet facilisis. Suspendisse ante odio,
pulvinar non nulla sed, consequat lacinia risus.
Aliquam mollis pulvinar lorem sed efficitur.
Footer
<div class="ts-app-layout is-vertical" style="height: 260px">
<div class="cell">
<div class="ts-content">Header</div>
</div>
<div class="cell is-scrollable is-fluid">
<div class="ts-content">
<p>Fusce non enim egestas, lobortis diam et, congue felis.</p>
<p>Rhoncus est sed laoreet facilisis. Suspendisse ante odio,</p>
<p>pulvinar non nulla sed, consequat lacinia risus.</p>
<p>Aliquam mollis pulvinar lorem sed efficitur.</p>
</div>
</div>
<div class="cell">
<div class="ts-content">Footer</div>
</div>
</div>A cell can have a secondary background to indicate it is not the main content.
Sidebar
Content
<div class="ts-app-layout is-horizontal">
<div class="cell is-secondary">
<div class="ts-content">Sidebar</div>
</div>
<div class="cell is-fluid">
<div class="ts-content">Content</div>
</div>
</div>A cell can have a tertiary background to promote the main content.
Sidebar
Hello, world!
<div class="ts-app-layout is-horizontal">
<div class="cell">
<div class="ts-content">Sidebar</div>
</div>
<div class="cell is-tertiary is-fluid">
<div class="ts-content">
<div class="ts-box">
<div class="ts-content">
Hello, world!
</div>
</div>
</div>
</div>
</div>Compositions
Make a single-page application with App Sidebar and App Navbar.
TEACAT DEVELOPERS
VERSION 1.3.4
<div class="ts-app-layout is-horizontal">
<div class="cell" style="width: 245px">
<div class="ts-content">
<div class="ts-header is-big is-heavy">
TEACAT DEVELOPERS
</div>
<div class="ts-text is-description is-heavy">
VERSION 1.3.4
</div>
</div>
<div class="ts-app-sidebar">
<div class="header">
STARTUP
</div>
<a class="item">
<span class="ts-icon is-house-icon"></span> Home
</a>
<div class="header">
MANAGEMENT
</div>
<a class="item is-active">
<span class="ts-icon is-user-icon"></span> Users
</a>
<a class="item">
<span class="ts-icon is-download-icon"></span> Downloads
</a>
<div class="header">
System
</div>
<a class="item">
<span class="ts-icon is-gears-icon"></span> Settings
</a>
</div>
<div class="ts-content">
<button class="ts-button is-outlined is-fluid">
Logout
</button>
</div>
</div>
<div class="cell is-fluid is-vertical">
<div class="cell is-fluid is-secondary"></div>
<div class="cell">
<div class="ts-content">
<div class="ts-app-navbar is-fluid">
<a class="item">
<span class="ts-icon is-user-icon"></span>
<div class="label">Users</div>
</a>
<a class="item">
<span class="ts-icon is-house-icon"></span>
<div class="label">Home</div>
</a>
<a class="item is-active">
<span class="ts-icon is-newspaper-icon"></span>
<div class="label">News</div>
</a>
</div>
</div>
</div>
</div>
</div>Looking for similar components?
