Ionic Header and Footer

Header

Header is a component fixed at the top of the screen. It can contain titles and functional buttons on the left and right.

Ionic provides many color styles by default. You can use different style names, and of course 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

Sub Header is also fixed at the top, but it is below the Header. Even if the Header is not written, the Sub Header style will still have a Header's distance from the top. The color styles are the same as 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

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

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

Try it »

Footer is the same as the Header above, except that the style name bar-header is replaced 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 »

In addition, if the footer has no title but you need a button on the right, you need to add pull-right to the right button, like:

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

Try it »

Other Extensions