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>

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-image: var(--f7-bars-bg-image);
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  --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: 7px;
  --f7-subnavbar-shadow-image: none;
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}
.md {
  --f7-subnavbar-height: 48px;
  --f7-subnavbar-inner-padding-left: 16px;
  --f7-subnavbar-inner-padding-right: 16px;
  --f7-subnavbar-title-font-size: 20px;
  --f7-subnavbar-title-font-weight: 500;
  --f7-subnavbar-title-letter-spacing: 0;
  --f7-subnavbar-title-margin-left: 0px;
  --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  /*
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  */
}
.aurora {
  --f7-subnavbar-height: 38px;
  --f7-subnavbar-inner-padding-left: 15px;
  --f7-subnavbar-inner-padding-right: 15px;
  --f7-subnavbar-title-font-size: 26px;
  --f7-subnavbar-title-font-weight: bold;
  --f7-subnavbar-title-letter-spacing: -0.03em;
  --f7-subnavbar-title-margin-left: 0px;
  --f7-subnavbar-shadow-image: none;
  --f7-subnavbar-link-height: auto;
  --f7-subnavbar-link-line-height: inherit;
}

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>