🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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

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.

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-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).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

: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

subnavbar.html
<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>
subnavbar-title.html
<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>