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.

There are following components included:

PropTypeDefaultDescription
<f7-subnavbar> properties
slidingbooleanEnables "sliding" effect
titlestringSubnvabar title
innerbooleantrueWhen enabled the additional "subnavbar-inner" wrapper element will be added

Examples

subnavbar.vue
<template>
  <f7-page>
    <f7-navbar title="Subnavbar">
      <f7-subnavbar>
        <f7-segmented strong>
          <f7-button small-md active>Link 1</f7-button>
          <f7-button small-md>Link 2</f7-button>
          <f7-button small-md>Link 3</f7-button>
        </f7-segmented>
      </f7-subnavbar>
    </f7-navbar>
    <f7-block>
      <p>
        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.
      </p>
    </f7-block>
    <f7-list strong outline-ios>
      <f7-list-item link="/subnavbar-title/" title="Subnavbar Title"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Subnavbar,
  f7Segmented,
  f7Button,
  f7Block,
  f7List,
  f7ListItem,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Subnavbar,
    f7Segmented,
    f7Button,
    f7Block,
    f7List,
    f7ListItem,
  },
};
</script>
subnavbar-title.vue
<template>
  <f7-page>
    <f7-navbar>
      <f7-subnavbar title="Page Title"></f7-subnavbar>
    </f7-navbar>
    <f7-block>
      <p>
        It also possible to use Subnavbar to display page title and keep navbar only for actions.
      </p>
    </f7-block>
    <f7-block>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet
        voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi
        quas iure magnam minus voluptatem quaerat!
      </p>
      <p>
        Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint,
        veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum
        ipsa totam perspiciatis cupiditate, amet maiores!
      </p>
      <p>
        Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias
        nobis perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut
        provident animi quae, impedit id!
      </p>
      <p>
        Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi!
        Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio
        laboriosam in culpa veniam alias ad.
      </p>
      <p>
        A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor
        vel fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil
        voluptatum culpa. Accusamus aliquid facere tenetur?
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7Block, f7Subnavbar } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Block,
    f7Subnavbar,
  },
};
</script>