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="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="title">子导航</div>
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <div class="segmented segmented-strong">
            <button class="button button-small-md button-active">链接 1</button>
            <button class="button button-small-md">链接 2</button>
            <button class="button button-small-md">链接 3</button>
            <span class="segmented-highlight"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>当您需要将其他元素放入导航栏中时,子导航栏是非常有用的,比如选项卡链接或搜索栏。它在导航栏隐藏时仍然可见。.</p>
    </div>
    <div class="list list-strong list-outline-ios links-list">
      <ul>
        <li><a href="/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="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <div class="subnavbar-title">页面标题</div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>也可以使用Subnavbar来显示页面标题,并将Navbar仅用于操作。.</p>
    </div>
    <div class="block">
      <p>从前有一个小村庄,村庄里住着一位年轻的农夫叫小明。小明勤劳善良,每天都辛勤地耕种着自己的土地。他的庄稼茁壮成长,给他带来了丰收的喜悦。
      </p>
      <p>然而,一天,一场突如其来的大雨摧毁了小明的庄稼。小明心灰意冷,感到非常沮丧。他不知道该如何面对这个突如其来的挫折。

        就在他陷入绝望之际,一位老农夫走到了他身边。老农夫告诉小明,人生就像农田,有时会遭遇风雨,但只要坚持下去,阳光终将再次照耀。</p>
      <p>受到老农夫的鼓励,小明决定重新开始。他重新耕种土地,种植新的庄稼。他学会了更好地管理农田,采取了更科学的种植方法。
      </p>
      <p>经过一段时间的努力,小明的庄稼再次茁壮成长。这次的收成比以往更加丰盛,小明感到非常欣慰和自豪。</p>
      <p>这个小故事告诉我们,生活中难免会遇到挫折和困难,但只要坚持不懈,勇敢面对,我们就能够克服困难,迎来更好的明天。</p>
    </div>
  </div>
</div>