Ionic Header

Ionic Header : Ionic Header is bar which is located at the top of the screen. Basically header contains the Title, logo or navigation buttons. Class .bar-header is used to create header which is by default placed at the top of the screen. We will explain the header example with demo in this tutorial.

Ionic Header Example

Here is class to add the default header bar.

Class bar bar-header

Header Css Class

If you run the above example it will produce the following output-

Ionic Header Example

Header Colors Example


This is default color “white”

Header bar-light Css Class

Try it »


This is default color “white”

Header bar-assertive Css Class

Try it »

The above example will produce following output-

Ionic bar-assertive example

List of colors available in Ionic Framework –

NoClassColor nameColor
2bar-stableLight Gray
4bar-calmLight blue

Ionic Sub Header

Sub header is bar placed below the main bar. You can customize the sub header as per your need. We are going to create a sub header following the main header in dark color using the bar-dark class. Here is an example of ionic sub header-

Ionic Sub Header Example

Try it »

The Above Example will produce output something like this –

Ionic Sub Header Subheader example

More Examples

Let’s have look over more Header example and demo here.

Ionic Add Header Search Bar with Icon

Almost every application need search bar placed at the header which enables the users to search content. You can add the search bar with icon as below –

Ionic Add Header Search Bar with Icon Example:

Try it »

Ionic Header Title Center

Ionic by default adds the header title in center if you are still facing issue while centering the header title you can add the class – title-center as below –

Ionic Header Title Center:

Ionic Add header Button | Navigation Button

Sometimes we need to add the button in header. It is very simple to add button in header. You can add nav button with icon and other buttons as below –

Ionic Add header Button | Navigation Button Example:

Try it »

Ionic Add Icon to Header | Add Logo Example

You can add logo or image in header as below –

Ionic Add Icon to Header | Add Logo Example:

Try it »

User Ans/Comments

📖 Read More