Ionic Header and Footer

Header

The Header is a component fixed at the top of the screen, which can include a title and functional buttons on the left and right.

Ionic provides many default color styles. You can call different style names, or you can also customize one.

bar-light

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

Try it »

bar-stable

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

Try it »

bar-positive

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

Try it »

bar-calm

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

Try it »

bar-balanced

<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>

Try it »

bar-energized

<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>

Try it »

bar-assertive

<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>

Try it »

bar-royal

<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>

Try it »

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

Try it »

Sub Header

The Sub Header is also fixed at the top, just below the Header. Even if the Header is not written, the Sub Header will have a distance from the top as if there were a Header. The color styles are the same as the Header.

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

Try it »

Footer

The Footer is at the bottom of the screen and can contain various types of content.

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

Try It »

The Footer is similar to the Header, just replace the style name bar-header with bar-footer.

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

Try It »

Additionally, if there is no title in the footer but you need a button on the right, you should add pull-right to the right button like this:

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>

Try It »