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="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>

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