title: ionic : How to add custom elements to header bar or add own header bar per view?
body: <p>I'm new to Ionic. I want to add custom items to the header bar. </p>
  
  <p>It seems the header bar is generated by the framework inside the ion-nav-bar element.</p>
  
  <pre><code>&lt;ion-nav-bar class="bar-positive"&gt;
    &lt;ion-nav-back-button&gt;
    &lt;/ion-nav-back-button&gt;
  &lt;/ion-nav-bar&gt;
  </code></pre>
  
  <p>I see, that the view-title from the tab template gets automatically put into the header bar. </p>
  
  <pre><code>&lt;ion-view view-title="Home"&gt;
  </code></pre>
  
  <p>Here is the code I am working on: <a href="https://plnkr.co/edit/39XMp3FylDHofwJcFZmr?p=preview" rel="nofollow">https://plnkr.co/edit/39XMp3FylDHofwJcFZmr?p=preview</a>
  This is taken from the ionic documentation: <a href="http://ionicframework.com/docs/api/directive/ionTabs/" rel="nofollow">http://ionicframework.com/docs/api/directive/ionTabs/</a></p>
  
  <p>The header-bar documentation says, to add the header bar element before the ion-content element (see the home template), but it does not get displayed.</p>
  
  <pre><code>&lt;ion-view view-title="Home"&gt;
    &lt;ion-header-bar align-title="left" class="bar-positive"&gt;
      &lt;h1 class="title"&gt;Custom Header&lt;/h1&gt;
    &lt;/ion-header-bar&gt;
    &lt;ion-content class="padding"&gt;
      &lt;p&gt;
        &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/facts"&gt;Scientific Facts&lt;/a&gt;
      &lt;/p&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>How can I add my own elements to the header bar, depending on currently displayed tab, or have a header bar in each template?</p>