Subnavbar Vue Component

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

Subnavbar Vue component represents Subnavbar component.

Subnavbar Components

There are following components included:

• f7-subnavbar

Subnavbar Properties

Prop	Type	Default	Description
<f7-subnavbar> properties
sliding	boolean		Enables "sliding" effect
title	string		Subnvabar title
inner	boolean	true	When enabled the additional "subnavbar-inner" wrapper element will be added

Examples

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

<!-- Renders to: -->

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

Inside of Navbar With Title

<f7-navbar back-link="Back">
  <f7-subnavbar title="Page Title"></f7-subnavbar>
</f7-navbar>

<!-- Renders to: -->

<div class="navbar">
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <span>Back</span>
      </a>
    </div>
    <div class="subnavbar">
      <div class="subnavbar-inner">
        <div class="title">Page Title</div>
      </div>
    </div>
  </div>
</div>