Subnavbar

Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Searchbar. It also remains visible when Navbar hidden

Subnavbar Layout

In Navbar

<div class="page page-with-subnavbar">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">...</div>
      <div class="title">...</div>
      <div class="right">...</div>

      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#tab1" class="button button-active">Tab 1</a>
            <a href="#tab2" class="button">Tab 2</a>
            <a href="#tab3" class="button">Tab 3</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Page content -->
  <div class="page-content">
    ...
  </div>
</div>

Along with "left", "right" and "title" elements, "subnavbar" also supports "sliding" class for sliding transition when used with Dynamic Navbar.

Note that page that contains Subnavbar must have additional page-with-subnavbar class which adds additional top padding required for subnavbar

In Page

It is also possible to put it as a direct child of page right after Navbar:

<div class="page page-with-subnavbar">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">...</div>
      <div class="title">...</div>
      <div class="right">...</div>
    </div>
  </div>
  <!-- Subnavbar -->
  <div class="subnavbar">
    <div class="subnavbar-inner">
      <!-- Subnavbar content, for example tabs buttons -->
      <div class="segmented">
        <a href="#tab1" class="button button-active">Tab 1</a>
        <a href="#tab2" class="button">Tab 2</a>
        <a href="#tab3" class="button">Tab 3</a>
      </div>
    </div>
  </div>
  <!-- Page content -->
  <div class="page-content">
    ...
  </div>
</div>

In Page Content

It is also possible to put it as a direct child of page-content. In this case it will be static and scroll with the page content:

<div class="page page-with-subnavbar">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">...</div>
      <div class="title">...</div>
      <div class="right">...</div>
    </div>
  </div>

  <!-- Page content -->
  <div class="page-content">
    <!-- Subnavbar -->
    <div class="subnavbar">
      <div class="subnavbar-inner">
        <!-- Subnavbar content, for example tabs buttons -->
        <div class="segmented">
          <a href="#tab1" class="button button-active">Tab 1</a>
          <a href="#tab2" class="button">Tab 2</a>
          <a href="#tab3" class="button">Tab 3</a>
        </div>
      </div>
    </div>
    ...
  </div>
</div>

Example

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"></div>
      <div class="title">Sub Navbar</div>
      <div class="right"></div>
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <div class="segmented segmented-raised">
            <a class="button tab-link tab-link-active" href="#tab1">Tab 1</a>
            <a class="button tab-link" href="#tab2">Tab 2</a>
            <a class="button tab-link" href="#tab3">Tab 3</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-content hide-navbar-on-scroll">
    <div class="tabs">
      <div class="tab tab-active" id="tab1">
        <div class="block">
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
      <div class="tab" id="tab2">
        <div class="block">
          <p>Donec iaculis posuere massa sed dignissim...</p>
        </div>
      </div>
      <div class="tab" id="tab3">
        <div class="block">
          <p>Etiam non interdum erat. Curabitur erat lacus...</p>
        </div>
      </div>
    </div>
  </div>
</div>