Ionic - Javascript Header

This is the Ionic directive, which will add the header bar.

Using JavaScript Header

To create a JavaScript header bar, we need to apply the ion-header-bar directive in the HTML file. Since the default header is white, we will add title, so it will be showed on white background. We will add it to our index.html file.

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

The above code will produce the following screen −

Styling Header

Just like the CSS Header Bar, the JavaScript counterpart can be styled in a similar fashion. To apply color, we need to add a color class with a bar prefix. Therefore, if we want to use a blue header, we will add a bar-positive class. We can also move the title to one side of the screen by adding the align-title attribute. The values for this attribute can be center, left or right.

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

The above code will produce the following screen −

Adding Elements

You will usually want to add some elements to your header. The following example shows how to place a button on the left side and an icon to the right side of the ion-header-bar. You can also add other elements to your header.

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

The above code will produce the following screen −

Adding Sub Header

A Sub header is created when a bar-subheader class is added to the ion-header-bar. We will add a bar-assertive class to apply red color to our sub header.

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

The above code will produce the following screen −