Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Toolbar

ion-toolbar

Improve this doc

A Toolbar is a generic bar that is positioned above or below content. Unlike a Navbar, a toolbar can be used as a subheader. When toolbars are placed within an <ion-header> or <ion-footer>, the toolbars stay fixed in their respective location. When placed within <ion-content>, toolbars will scroll with the content.

Buttons in a Toolbar

Buttons placed in a toolbar should be placed inside of the <ion-buttons> element. An exception to this is a menuToggle button. It should not be placed inside of the <ion-buttons> element. Both the <ion-buttons> element and the menuToggle can be positioned inside of the toolbar using different properties. The below chart has a description of each property.

Property Description
start Positions element to the left of the content in ios mode, and directly to the right in md and wp mode.
end Positions element to the right of the content in ios mode, and to the far right in md and wp mode.
left Positions element to the left of all other elements.
right Positions element to the right of all other elements.

In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top. Both the md box-shadow and the ios border can be removed by adding the no-border attribute to the element.

<ion-header no-border>
  <ion-toolbar>
    <ion-title>Header</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
</ion-content>

<ion-footer no-border>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Usage

<ion-header no-border>

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

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

<ion-header>


<ion-content>

  <ion-toolbar>
    <ion-title>Scrolls with the content</ion-title>
  </ion-toolbar>

</ion-content>


<ion-footer no-border>

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

</ion-footer>

Input Properties

Attr Type Details
color string

The predefined color to use. For example: "primary", "secondary", "danger".

mode string

The mode to apply to this component. Mode can be ios, wp, or md.

Sass Variables

Property Default Description
$toolbar-order-ios ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, buttons-start: 3, content: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-ios-button-font-size 1.7rem

Font size of the toolbar button

$toolbar-ios-title-font-size 1.7rem

Font size of the toolbar title

$toolbar-ios-title-font-weight 600

Font weight of the toolbar title

$toolbar-ios-title-text-align center

Text alignment of the toolbar title

$toolbar-ios-title-text-color color-contrast($colors-ios, $toolbar-ios-background)

Text color of the toolbar title

$toolbar-ios-button-color color-contrast($colors-ios, $toolbar-ios-background, ios)

Text color of the toolbar button

$toolbar-ios-button-border-radius 4px

Border radius of the toolbar button

$navbar-ios-height $toolbar-ios-height

Height of the navigation bar

Property Default Description
$toolbar-order-md ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-md-title-font-size 2rem

Font size of the toolbar title

$toolbar-md-title-text-color color-contrast($colors-md, $toolbar-md-background, md)

Text color of the toolbar title

$toolbar-md-button-font-size 1.4rem

Font size of the toolbar button

$toolbar-md-button-color $toolbar-md-title-text-color

Text color of the toolbar button

$toolbar-md-button-border-radius 2px

Border radius of the toolbar button

$navbar-md-height $toolbar-md-height

Height of the navigation bar

Property Default Description
$toolbar-order-wp ( back-button: 0, menu-toggle-start: 1, buttons-left: 2, content: 3, buttons-start: 4, buttons-end: 5, buttons-right: 6, menu-toggle-end: 7, )

Order of the toolbar elements

$toolbar-wp-title-padding 0 6px

Padding of the toolbar title

$toolbar-wp-title-font-size 1.5rem

Font size of the toolbar title

$toolbar-wp-title-font-weight bold

Font weight of the toolbar title

$toolbar-wp-title-text-transform uppercase

Text transform of the toolbar title

$toolbar-wp-title-text-color color-contrast($colors-wp, $toolbar-wp-background, wp)

Text color of the toolbar title

$toolbar-wp-button-font-size 1.4rem

Font size of the toolbar button

$toolbar-wp-button-color color-contrast($colors-wp, $toolbar-wp-background, wp)

Text color of the toolbar button

$toolbar-wp-button-border-radius 2px

Border radius of the toolbar button

$navbar-wp-height $toolbar-wp-height

Height of the navigation bar

Related

Navbar API Docs

API

Native

General