工具栏是位于屏幕底端的固定（在固定和穿透布局类型中）区域，它包含导航元素。
工具栏不包含任何其他部分，内部只含有普通文本。
工具栏布局非常简单：
<div class="toolbar"> <div class="toolbar-inner"> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> <a href="#" class="link">Link 3</a> </div> </div>
默认情况下，所有的工具栏元素（链接）沿着工具栏等距分布 - 它们之间的距离相等。
如果我们已经初始化视图我们可以使用工具栏的如下方法：
| myApp.hideToolbar(toolbar) | Hide specified toolbar.toolbar - HTMLElement or string (with CSS Selector) of required toolbar. Required. |
| myApp.showToolbar(toolbar) | Show specified toolbar.toolbar - HTMLElement or string (with CSS Selector) of required toolbar. Required. |
| view.hideToolbar() | 隐藏该视图中的工具栏 |
| view.showToolbar() | 显示该视图中的工具栏 |
下面为示例：
var myApp = new Framework7();
var $ = Framework7.$;
var mainView = myApp.addView('.view-main');
$('.hide-toolbar').on('click', function () {
mainView.hideToolbar();
});
$('.show-toolbar').on('click', function () {
mainView.showToolbar();
});Framework7允许你在不需要工具栏而且通过Ajax载入的页面上，自动隐藏工具栏。它只在你使用穿透类型的布局时才有用。
为了实现这点，你要做的是添加<div class="page no-toolbar">)，然后在那里放置一个空的导航栏：
<!-- Page has additional "no-toolbar" class --> <div data-page="about" class="page no-toolbar"> <div class="page-content"> <div class="content-block"> <p><a href="#" class="back button">Go Back</a></p> ... </div> </div> </div>