Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and modals.

Header

The most simple layout available consists of a header and content. Most pages in an app generally have both of these, but a header is not required in order to use content.

  1. <ion-app>
  2.   <ion-header>
  3.     <ion-toolbar>
  4.       <ion-title>Header</ion-title>
  5.     </ion-toolbar>
  6.   </ion-header>
  8.   <ion-content padding>
  9.     <h1>Main Content</h1>
  10.   </ion-content>
  11. </ion-app>

As you can see, a toolbar in a header appears above the content. Sometimes an app needs to have a toolbar below the content, which is when a footer is used.

  1. <ion-app>
  2.   <ion-content padding>
  3.     <h1>Main Content</h1>
  4.   </ion-content>
  6.   <ion-footer>
  7.     <ion-toolbar>
  8.       <ion-title>Footer</ion-title>
  9.     </ion-toolbar>
  10.   </ion-footer>
  11. </ion-app>

These can also be combined on one page to have a toolbar above and below the content.

  1. <ion-app>
  2.   <ion-header>
  3.     <ion-toolbar>
  4.       <ion-title>Header</ion-title>
  5.     </ion-toolbar>
  6.   </ion-header>
  8.   <ion-content padding>
  9.     <h1>Main Content</h1>
  10.   </ion-content>
  12.   <ion-footer>
  13.     <ion-toolbar>
  14.       <ion-title>Footer</ion-title>
  15.     </ion-toolbar>
  16.   </ion-footer>
  17. </ion-app>

Tabs Layout

A layout consisting of horizontal tabs can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an ion-router-outlet or ion-nav.

  1. <ion-app>
  2.   <ion-tabs>
  3.     <ion-tab tab="home">
  4.       <h1>Home Content</h1>
  5.     </ion-tab>
  6.     <ion-tab tab="settings">
  7.       <h1>Settings Content</h1>
  8.     </ion-tab>
  10.     <ion-tab-bar slot="bottom">
  11.       <ion-tab-button tab="home">
  12.         <ion-label>Home</ion-label>
  13.         <ion-icon name="home"></ion-icon>
  14.       </ion-tab-button>
  15.       <ion-tab-button tab="settings">
  16.         <ion-label>Settings</ion-label>
  17.         <ion-icon name="settings"></ion-icon>
  18.       </ion-tab-button>
  19.     </ion-tab-bar>
  20.   </ion-tabs>
  21. </ion-app>

Menu Layout

A standard layout among mobile apps includes the ability to toggle a side menu by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.

  1. <ion-app>
  2.   <ion-menu>
  3.     <ion-header>
  4.       <ion-toolbar color="primary">
  5.         <ion-title>Menu</ion-title>
  6.       </ion-toolbar>
  7.     </ion-header>
  9.     <ion-content>
  10.       <ion-list>
  11.         <ion-list-header>
  12.           Navigate
  13.         </ion-list-header>
  14.         <ion-menu-toggle auto-hide="false">
  15.           <ion-item button>
  16.             <ion-icon slot="start" name='home'></ion-icon>
  17.             <ion-label>
  18.               Home
  19.             </ion-label>
  20.           </ion-item>
  21.         </ion-menu-toggle>
  22.       </ion-list>
  23.     </ion-content>
  24.   </ion-menu>
  26.   <ion-page class="ion-page" main>
  27.     <ion-header>
  28.       <ion-toolbar>
  29.         <ion-buttons slot="start">
  30.           <ion-menu-toggle>
  31.             <ion-button>
  32.               <ion-icon slot="icon-only" name="menu"></ion-icon>
  33.             </ion-button>
  34.           </ion-menu-toggle>
  35.         </ion-buttons>
  36.         <ion-title>Header</ion-title>
  37.       </ion-toolbar>
  38.     </ion-header>
  39.     <ion-content padding>
  40.       <h1>Main Content</h1>
  41.       <p>Click the icon in the top left to toggle the menu.</p>
  42.     </ion-content>
  43.   </ion-page>
  44. </ion-app>
  46. <ion-menu-controller></ion-menu-controller>

Split Pane Layout

A split pane layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.

By default, the split pane view will show when the screen is larger than 768px, or the md breakpoint, but this can be customized to use different breakpoints by setting the when property. Below is an example where the split pane contains a menu that is visible for sm screens and up, or when the viewport is larger than 576px. By resizing the browser horizontally so that the app is smaller than this, the split pane view will disappear.

  1. <ion-app>
  2.   <ion-split-pane when="sm">
  3.     <ion-menu>
  4.       <ion-header>
  5.         <ion-toolbar color="primary">
  6.           <ion-title>Menu</ion-title>
  7.         </ion-toolbar>
  8.       </ion-header>
  10.       <ion-content>
  11.         <ion-list>
  12.           <ion-list-header>
  13.             Navigate
  14.           </ion-list-header>
  15.           <ion-menu-toggle auto-hide="false">
  16.             <ion-item button>
  17.               <ion-icon slot="start" name='home'></ion-icon>
  18.               <ion-label>
  19.                 Home
  20.               </ion-label>
  21.             </ion-item>
  22.           </ion-menu-toggle>
  23.         </ion-list>
  24.       </ion-content>
  25.     </ion-menu>
  27.     <ion-page class="ion-page" main>
  28.       <ion-header>
  29.         <ion-toolbar>
  30.           <ion-buttons slot="start">
  31.             <ion-menu-toggle>
  32.               <ion-button>
  33.                 <ion-icon slot="icon-only" name="menu"></ion-icon>
  34.               </ion-button>
  35.             </ion-menu-toggle>
  36.           </ion-buttons>
  37.           <ion-title>Header</ion-title>
  38.         </ion-toolbar>
  39.       </ion-header>
  40.       <ion-content padding>
  41.         <h1>Main Content</h1>
  42.       </ion-content>
  43.     </ion-page>
  45.   </ion-split-pane>
  46. </ion-app>


It's important to note that the element with the main attribute will be the main content that is always visible. This can be any element, including an ion-nav, ion-router-outlet, or an ion-tabs.