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>