v7.1.5
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
sun_max_fillmoon_fill
SponsorsBecome a sponsor
Improve this Doc

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-image: var(--f7-bars-bg-image);
  --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-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: 48px;
  --f7-subnavbar-inner-padding-left: 16px;
  --f7-subnavbar-inner-padding-right: 16px;
  --f7-subnavbar-title-font-size: 28px;
  --f7-subnavbar-title-font-weight: bold;
  --f7-subnavbar-title-letter-spacing: 0em;
  --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-bg"></div>
    <div class="navbar-inner">
      <div class="title">Sub Navbar</div>
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <div class="segmented segmented-strong">
            <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>
            <span class="segmented-highlight"></span>
          </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, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non,
            sagittis a elit. Sed consequat odio at leo varius viverra. Proin et purus eu justo lacinia efficitur
            in sed orci. Morbi dignissim accumsan felis, at malesuada lorem aliquet finibus. Duis vitae enim a
            mauris luctus lobortis ac vel dolor. Aenean id pretium quam. Duis sed sem ullamcorper erat venenatis
            feugiat sed pretium magna. Suspendisse massa lectus, dictum congue arcu quis, auctor vulputate lectus.
            Duis vitae finibus purus, nec condimentum dui. Sed ultricies mauris vitae libero mollis lobortis. Duis
            ut tortor scelerisque, volutpat metus eget, rutrum est. Integer diam ex, condimentum vel orci a,
            lobortis bibendum urna. Aenean porttitor, eros sit amet ultrices efficitur, libero odio rhoncus justo,
            quis volutpat lorem arcu eu eros. Mauris gravida euismod diam, eget finibus quam ornare non. Nam metus
            massa, porttitor id tempor et, pharetra id felis.</p>
          <p>In sed augue non metus volutpat ultricies in quis nisi. Donec sed placerat risus. Donec nec est
            turpis. Ut egestas ipsum eget lectus imperdiet dictum. Praesent congue dui nec turpis semper,
            pellentesque ullamcorper enim sodales. Quisque porttitor porta nibh, sit amet lacinia dui imperdiet
            et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras a enim
            eget elit cursus ullamcorper fringilla eu mi. Integer commodo est elit, eu mattis quam ultrices non.
            Fusce in sagittis elit. Curabitur in consequat est. Nulla mi lorem, tincidunt eget dapibus id,
            ultrices vel sem. Etiam fringilla cursus odio, nec cursus nisi commodo quis. Nullam nec neque vel
            turpis eleifend condimentum sed quis felis. Integer ut diam nibh.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non,
            sagittis a elit. Sed consequat odio at leo varius viverra. Proin et purus eu justo lacinia efficitur
            in sed orci. Morbi dignissim accumsan felis, at malesuada lorem aliquet finibus. Duis vitae enim a
            mauris luctus lobortis ac vel dolor. Aenean id pretium quam. Duis sed sem ullamcorper erat venenatis
            feugiat sed pretium magna. Suspendisse massa lectus, dictum congue arcu quis, auctor vulputate lectus.
            Duis vitae finibus purus, nec condimentum dui. Sed ultricies mauris vitae libero mollis lobortis. Duis
            ut tortor scelerisque, volutpat metus eget, rutrum est. Integer diam ex, condimentum vel orci a,
            lobortis bibendum urna. Aenean porttitor, eros sit amet ultrices efficitur, libero odio rhoncus justo,
            quis volutpat lorem arcu eu eros. Mauris gravida euismod diam, eget finibus quam ornare non. Nam metus
            massa, porttitor id tempor et, pharetra id felis.</p>
        </div>
      </div>
      <div class="tab" id="tab2">
        <div class="block">
          <p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum arcu
            nec condimentum eleifend. Aenean eget sapien ut diam egestas porttitor. Praesent quis diam fermentum,
            laoreet est consectetur, posuere enim. Morbi neque leo, vehicula at sapien ut, fringilla mollis enim.
            Cras sed libero mi. Etiam at vestibulum urna. Vestibulum ante ipsum primis in faucibus orci luctus et
            ultrices posuere cubilia Curae; In pharetra ut risus eu vehicula. Vestibulum interdum libero
            vestibulum nunc tempus vulputate. Etiam dolor lacus, porttitor pulvinar magna id, dictum hendrerit
            tortor.</p>
          <p>Curabitur egestas, mi id mattis aliquam, lectus neque facilisis sem, in fringilla leo ante in nibh.
            Proin porta tincidunt dolor, vel fringilla lorem cursus ac. Suspendisse feugiat congue metus, sed
            mattis magna imperdiet sed. Donec a nunc quis urna bibendum feugiat. Nulla rhoncus lorem et orci
            condimentum molestie. Fusce fringilla arcu nec purus posuere malesuada. Praesent nec ipsum ex.
            Praesent sed diam non nisl imperdiet molestie.</p>
          <p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elementum arcu
            nec condimentum eleifend. Aenean eget sapien ut diam egestas porttitor. Praesent quis diam fermentum,
            laoreet est consectetur, posuere enim. Morbi neque leo, vehicula at sapien ut, fringilla mollis enim.
            Cras sed libero mi. Etiam at vestibulum urna. Vestibulum ante ipsum primis in faucibus orci luctus et
            ultrices posuere cubilia Curae; In pharetra ut risus eu vehicula. Vestibulum interdum libero
            vestibulum nunc tempus vulputate. Etiam dolor lacus, porttitor pulvinar magna id, dictum hendrerit
            tortor.</p>
          <p>Curabitur egestas, mi id mattis aliquam, lectus neque facilisis sem, in fringilla leo ante in nibh.
            Proin porta tincidunt dolor, vel fringilla lorem cursus ac. Suspendisse feugiat congue metus, sed
            mattis magna imperdiet sed. Donec a nunc quis urna bibendum feugiat. Nulla rhoncus lorem et orci
            condimentum molestie. Fusce fringilla arcu nec purus posuere malesuada. Praesent nec ipsum ex.
            Praesent sed diam non nisl imperdiet molestie.</p>
        </div>
      </div>
      <div class="tab" id="tab3">
        <div class="block">
          <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent
            aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus.
            Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget
            risus. Quisque ullamcorper efficitur leo ac congue.</p>
          <p>Duis ac semper risus. Suspendisse consectetur ligula tellus, at fermentum erat pulvinar vel. Nullam
            in magna sed felis posuere efficitur vel sed neque. Suspendisse nulla enim, sodales rutrum ultricies
            vitae, semper tempor odio. Nam rutrum non erat non</p>
          <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent
            aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus.
            Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget
            risus. Quisque ullamcorper efficitur leo ac congue.</p>
          <p>Duis ac semper risus. Suspendisse consectetur ligula tellus, at fermentum erat pulvinar vel. Nullam
            in magna sed felis posuere efficitur vel sed neque. Suspendisse nulla enim, sodales rutrum ultricies
            vitae, semper tempor odio. Nam rutrum non erat non</p>
          <p>Etiam non interdum erat. Curabitur erat lacus, luctus ac varius vel, accumsan at mauris. Praesent
            aliquet placerat urna. Mauris mattis egestas dapibus. Integer vestibulum eget massa at maximus.
            Pellentesque et viverra magna. Donec eu porta nunc. Sed id velit et diam vehicula congue in eget
            risus. Quisque ullamcorper efficitur leo ac congue.</p>
        </div>
      </div>
    </div>
  </div>
</div>