# App layouts
> App layouts describe the fundamental structure of an application. It defines the basic areas and explains roughly where which kind of content belongs.
There are two fundamental layouts:
In most cases the header-based layout is recommended. The sidebar-based layout is only recommended for map based applications.
## Header-based Layout (regular)
When to use
Use for any regular application.
Description
The header serves as the main title of the application and as such carries
basic information, such as branding, app title and connection status, it
can also offer global features, such as user profile, settings and user
manual.
The main container offers space for content, such as dashboards and
landing pages.
Behaviour
The header is at the top of the screen while the main container is below.
When scrolling the header remains fixed and the main container scrolls
underneath it.
Components to use
App Frame
App Header
### With app bar
When to use
If you have a product that consists of multiple modules or a bunch of
applications, this app bar serves as a navigation across them.
Description
The app bar offers a navigation to multiple modules or applications that
open to the right of it.
Behaviour
The app bar can be considered to be on hierarchy level 1, the header is
level 2 and the main container level 3. When scrolling the app bar and the
header remains fixed and the main container scrolls underneath it.
Components to use
App Bar
App Frame
App Header
Demos
App layout
Storybook example
### With sidebar
When to use
If you need to offer multiple pages of content: consider to use this kind
of sidebar.
Description
The sidebar offers a navigation to multiple pages of content that open to
the right of it.
Behaviour
The header can be considered to be on hierarchy level 1, the sidebar is
level 2 and the main container level 3. When scrolling the header and the
sidebar remains fixed and the main container scrolls underneath it.
Components to use
App Frame
App Header
Sidebar Navigation
Demos
App layout
Storybook example
### With nav bar
When to use
If you need to offer some multiple pages of content: consider to use the
nav bar. This is recommended when you have only a few (e.g. less than 7)
pages.
Description
The nav bar tabs offers a navigation to multiple pages of content that
open below it.
Behaviour
The header can be considered to be on hierarchy level 1, the nav bar is
level 2 and the main container level 3. When scrolling the header and the
tabs remains fixed and the main container scrolls underneath it.
Components to use
App Frame
App Header
Nav Bar
Demos
App layout
Storybook example
### With nav bar and sidebar
When to use
If you have tabs and need to offer some multiple sub pages: consider to
use this kind of sidebar.
Description
The tabs offers a navigation to multiple pages of content that open below
it. Within these pages an additional sidebar can be used to give access to
multiple sub pages.
Behaviour
The header can be considered to be on hierarchy level 1, the nav bar is
level 2, the sidebar level 3 and the main container level 4. When
scrolling the header and the tabs remains fixed and the main container
scrolls underneath it.
Components to use
App Frame
App Header
Nav Bar
Sidebar Navigation
Demos
App layout
---
## Sidebar-based layout
When to use
Use for any map based application.
Description
As an alternative to the header-based layout you may chose the
sidebar-based layout. This is recommended for any map-based applications.
The sidebar contains a little header which serves as the main title of the
application. Global features, such as user profile, settings and user
manual have to be added to the sidebar.
The main container offers space for content, such as maps, dashboards or
landing pages.
Behaviour
The sidebar is at the left of the screen while the main container is on
the right. When scrolling the sidebar remains fixed and the main container
scrolls underneath it.
Components to use
App Frame With Sidebar
Sidebar Navigation
Demos
App layout
Storybook example
### With a header
When to use
Use for any map based application that have an additional need for a
header.
Description
As an addition to the sidebar-based layout you may chose to add a header.
This is recommended for any map-based applications that require a header.
Behaviour
The sidebar is at the left of the screen, the header is on its right and
at the top. The main container is on the right and bottom. When scrolling
the sidebar and the header remain fixed and the main container scrolls
underneath it.
Components to use
App Frame With Sidebar
Sidebar Navigation
App Header
Demos
App layout
Storybook example
---
## Dialog
When to use
Use to show any temporary content, like messages, forms, inputs.
Description
In addition to the basic layout the dialog can be used to show any
temporary content on top of the regular content.
Behaviour
Dialogs open above regular content. While a dialog is opened the
underlying content should not be changed.
Components to use
Dialog
## Drawer
When to use
Use a drawer to temporarily show some kind of additional content. The
content should not be too much and not too complex. Consider a proper
pager otherwise.
Description
In addition to the basic layout the drawer can be used to show any
temporary content on the rights (or left) side of the screen.
Behaviour
Drawers open above regular content and header. While a drawer is opened
the underlying content should not be changed.
Components to use