bars-hide.html

<div data-page="hide-navbar-toolbar" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
      <div class="center sliding">Hide Navbar & Toolbar</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <div class="content-block-inner">
        <p>Sometimes you may need to hide top Navbar or bottom Toolbar. Framework7 allows this by adding additional classes to pages. Check examples:</p>
      </div>
    </div>
    <div class="list-block">
      <ul>
        <li><a href="bars-no-navbar.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner"> 
                <div class="item-title">Hide Navbar</div>
              </div>
            </div></a></li>
        <li><a href="bars-no-toolbar.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner"> 
                <div class="item-title">Hide Toolbar</div>
              </div>
            </div></a></li>
        <li><a href="bars-no-navbar-toolbar.html" class="item-link">
            <div class="item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner"> 
                <div class="item-title">Hide Both</div>
              </div>
            </div></a></li>
      </ul>
    </div>
  </div>
</div>