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-bg"></div>
    <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.

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-bg"></div>
    <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-bg"></div>
    <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>

With Title

We can also use special subnavbar-title element to use Subnavbar to display larger title:

...
<div class="subnavbar">
  <div class="subnavbar-inner">
    <!-- Subnavbar title -->
    <div class="subnavbar-title">Title</div>
  </div>
</div>
...

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  /*
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-subnavbar-border-color: var(--f7-bars-border-color);
  --f7-subnavbar-link-color: var(--f7-bars-link-color);
  --f7-subnavbar-text-color: var(--f7-bars-text-color);
  */
  --f7-subnavbar-title-line-height: 1.2;
}
.ios {
  --f7-subnavbar-height: 44px;
  --f7-subnavbar-inner-padding-left: 8px;
  --f7-subnavbar-inner-padding-right: 8px;
  --f7-subnavbar-title-font-size: 34px;
  --f7-subnavbar-title-font-weight: 700;
  --f7-subnavbar-title-letter-spacing: -0.03em;
  --f7-subnavbar-title-margin-left: 8px;
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}
.md {
  --f7-subnavbar-height: 64px;
  --f7-subnavbar-inner-padding-left: 16px;
  --f7-subnavbar-inner-padding-right: 16px;
  --f7-subnavbar-title-font-size: 22px;
  --f7-subnavbar-title-font-weight: 400;
  --f7-subnavbar-title-letter-spacing: 0;
  --f7-subnavbar-title-margin-left: 0px;
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}

Example

<div class="page page-with-subnavbar">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Subnavbar</div>
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <div class="segmented segmented-strong">
            <button class="button button-small-md button-active">Link 1</button>
            <button class="button button-small-md">Link 2</button>
            <button class="button button-small-md">Link 3</button>
            <span class="segmented-highlight"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It
        also remains visible when Navbar hidden.</p>
    </div>
    <div class="list list-strong list-outline-ios links-list">
      <ul>
        <li><a href="/subnavbar-title/">Subnavbar Title</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <div class="subnavbar-title">Page Title</div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>It also possible to use Subnavbar to display page title and keep navbar only for actions.</p>
    </div>
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet voluptate vero quasi,
        veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas iure magnam minus voluptatem quaerat!
      </p>
      <p>Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint, veritatis illum ipsum?
        Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum ipsa totam perspiciatis cupiditate, amet
        maiores!</p>
      <p>Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis perferendis magni
        odio sunt, porro, totam praesentium possimus! Autem inventore ut provident animi quae, impedit id!</p>
      <p>Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi! Odio quasi amet hic
        nesciunt, quibusdam, est vero repellat sapiente perferendis, optio laboriosam in culpa veniam alias ad.</p>
      <p>A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel fugit omnis est
        dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum culpa. Accusamus aliquid facere
        tenetur?</p>
    </div>
  </div>
</div>