Sub Navbar Vue Component

Sub Navbar 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.

Sub Navbar Vue component represents Sub Navbar component.

Usage examples

<f7-subnavbar>
  <f7-buttons>
    <f7-button tab-link="#tab1" active>Tab 1</f7-button>
    <f7-button tab-link="#tab2">Tab 2</f7-button>
  </f7-buttons>
</f7-subnavbar>

Renders to:

<div class="subnavbar">
  <div class="buttons-row">
    <a href="#" class="button tab-link active" data-tab="#tab1">Tab 1</a>
    <a href="#" class="button tab-link" data-tab="#tab2">Tab 2</a>
  </div>
</div>

Inside of Navbar

<f7-navbar back-link="Back" title="Tabs" sliding>
  <f7-subnavbar sliding>
    <f7-buttons>
      <f7-button tab-link="#tab1" active>Tab 1</f7-button>
      <f7-button tab-link="#tab2">Tab 2</f7-button>
    </f7-buttons>
  </f7-subnavbar>
</f7-navbar>

Renders to:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding">
      <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <span>Back</span>
      </a>
    </div>
    <div class="center sliding">Tabs</div>
    <div class="subnavbar sliding">
      <div class="buttons-row">
        <a href="#" class="button tab-link active" data-tab="#tab1">Tab 1</a>
        <a href="#" class="button tab-link" data-tab="#tab2">Tab 2</a>
      </div>
    </div>
  </div>
</div>

Properties