Toolbar

Improve this doc

The toolbar is generic bar that sits above or below content. Unlike an Navbar, Toolbar can be used for a subheader as well. Since it's based on flexbox, you can place the toolbar where you need it and flexbox will handle everything else. Toolbars will automatically assume they should be placed before an ion-content, so to specify that you want it below, you can add the property position="bottom". This will change the flex order property.

Component

selector: ion-toolbar

Usage

<ion-toolbar>
  <ion-title>My Toolbar Title</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-title>I'm a subheader</ion-title>
</ion-toolbar>

 <ion-content></ion-content>

<ion-toolbar position="bottom">
  <ion-title>I'm a subfooter</ion-title>
</ion-toolbar>

<ion-toolbar position="bottom">
  <ion-title>I'm a footer</ion-title>
</ion-toolbar>

Attributes:

Attribute Type Description
position any set position of the toolbar, `top` or `bottom`. Default `top`.

Related

Navbar API Docs

API

Native

General