Navbar
- Navbar HTML Layout
- Navbar With Links
- Multiple Links
- Links With Icons + Text
- Links With Icons Only
- Transparent Navbar
- Large Title
- Large Transparent Title
- Theme-specific Styling
- Navbar Type
- Dynamic Navbar
- Navbar App Methods
- Navbar App Parameters
- Control Navbar With Page Classes
- Navbar Events
- CSS Variables
- Examples
Navbar is a fixed area at the top of a screen that contains Page title and navigation elements.
Navbar has 3 main parts: Left
, Title
and Right
. Each part may contain any HTML content, but it is recommended to use them in the following way:
Left part is designed to be used with "back link", icons or with single text link.
Title part is used to display page title or tab links (buttons row/segmented controller).
Right part is for the same as the Left part.
Navbar HTML Layout
Navbar layout is pretty simple and self explaining:
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">Left</div>
<div class="title">Page Title</div>
<div class="right">Right</div>
</div>
</div>
Note that Navbar's Title
element has lowest width priority, and when window screen will not fit all three elements Title part will be cut.
So if you use plain text in Title
part it will have ellipsis (...) on the end when it is cut. But you need to take care about it if you have some custom elements there.
Navbar With Links
To add links in Left or Right part you just need to add the plain <a>
tag with additional link
class:
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Left Link</a>
</div>
<div class="title">Page Title</div>
<div class="right">
<a href="#" class="link">Right Link</a>
</div>
</div>
</div>
Multiple Links
Nothing extraordinary. Just add more <a class="link">
to the required part:
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Left 1</a>
<a href="#" class="link">Left 2</a>
</div>
<div class="title">Page Title</div>
<div class="right">
<a href="#" class="link">Right 1</a>
</div>
</div>
</div>
Links With Icons + Text
Here comes a little difference. In this case we need to wrap link's text with <span>
element. It is required for correct spacing between icon and "word", and for animation:
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class="title">Title</div>
<div class="right">
<a href="#" class="link">
<i class="icon another-icon"></i>
<span>Menu</span>
</a>
</div>
</div>
</div>
Links With Icons Only
If need links with icons and without text we need to additional icon-only
class to links. With this class link will have fixed size so we can't miss it with finger:
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only">
<i class="icon icon-back"></i>
</a>
</div>
<div class="title">Title</div>
<div class="right">
<a href="#" class="link icon-only">
<i class="icon another-icon"></i>
</a>
</div>
</div>
</div>
Transparent Navbar
This feature available since Framework7 version 5.5.0.
Transparent navbar appears with transparent background and transparent title and on page scroll it becomes opaque. To enable transparent navbar we need to add navbar-transparent
class to navbar
:
<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-transparent">
...
</div>
Large Title
Large-title navbar has additional "row" (or "bar") with large title text, which is get collapsed on page scroll. To make it large we need to add additional navbar-large
class to navbar
and add additional title-large
element to it:
<!-- additional "navbar-large" class -->
<div class="navbar navbar-large">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<!-- ... -->
</div>
<!-- usual title will be visible when larger title collapsed -->
<div class="title">My App</div>
<div class="right">
<!-- ... -->
</div>
<!-- large title element -->
<div class="title-large">
<div class="title-large-text">My App</div>
</div>
</div>
</div>
Large Transparent Title
We can also enabled large-title navbar to be "transparent". When it is enabled, navbar background and its main title are hidden until page scrolled.
To make large title transparent we need additional navbar-transparent
class:
<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-large navbar-transparent">
<div class="navbar-bg"></div>
<div class="navbar-inner">
...
</div>
</div>
Theme-specific Styling
In ios
and aurora
themes Navbar has thin border on the bottom. To disable this border you need to add no-hairline
class to navbar element:
<div class="navbar no-hairline">...</div>
In md
theme Navbar has shadow. To disable this shadow you need to add no-shadow
class to navbar element:
<div class="navbar no-shadow">...</div>
Navbar Type
Now let's look where we can place our Navbar in DOM. There are several rules to place Navbar.
Static Navbar Type
Static navbar position is the probably most rarely used layout type. In this case Navbar is just part of the scrollable page content:
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Static navbar goes in the beginning inside of page-content -->
<div class="navbar">...</div>
...
</div>
</div>
Fixed Navbar Type
Fixed navbar is also part of the page but it is always visible on screen not depending on page scroll. In this case it must be a direct child of page and if page has also fixed toolbar then it must be BEFORE the toolbar:
<div class="page">
<!-- Fixed navbar goes ALWAYS FIRST -->
<div class="navbar">...</div>
<!-- Fixed toolbar goes ALWAYS AFTER navbar -->
<div class="toolbar toolbar-bottom">...</div>
<!-- Scrollable page content -->
<div class="page-content">
...
</div>
</div>
Fixed Navbar must always be a direct child of a page and BEFORE the toolbar (if fixed toolbar is used on this page)
Common Navbar Type
If we need only one common navbar for all pages in View then it must be a direct child of this view and be BEFORE all pages in view:
<div class="view">
<!-- View common navbar -->
<div class="navbar">...</div>
<!-- Pages -->
<div class="page">...</div>
</div>
If we need only one common navbar / navbar for all views then it must be a direct child of Views element and be BEFORE all views.
<div class="views tabs">
<!-- Views common navbar -->
<div class="navbar">...</div>
<div class="view tab tab-active" id="tab-1">...</div>
<div class="view tab" id="tab-2">...</div>
...
</div>
Common Navbar must always be a direct child of Views/View and BEFORE the Toolbar (if common Toolbar is also used)
Dynamic Navbar
Dynamic Navbar is supported only in iOS Theme
One of the iOS-theme awesome features is the dynamic navbar. Navbar's elements will slide and fade during pages transition and swipe back when dynamic navbar is enabled.
It is enabled by default when you use "Fixed-positioned" navbars, when Navbar is a direct child of the page.
If you want to disable it you need to pass iosDynamicNavbar: false
for required View on its initialisation or in global app parameters for all views. For example:
// Disable globally
var app = new Framework7({
view: {
iosDynamicNavbar: false,
},
});
// Disable only for view on its initialisation
var mainView = app.views.create('.view-main', {
iosDynamicNavbar: false,
});
Note that when Dynamic Navbar (iosDynamicNavbar
) is enabled, Navbar HTML element will be detached from the page and moved under View HTML element. In this case to access page related dynamic navbar element use app.navbar.getElByPage(pageEl)
method
Dynamic Navbar Layout
Dynamic Navbar layout is the same as for usual Navbar, the only difference is that you can add additional classes to the Navbar parts (Left, Title, Right) to tell which type of transition effect you want on this part:
By default (if there is no additional classes) each Navbar part has "Fade" transition effect
If you add
sliding
class to any of Navbar parts then it will have "Sliding" effectIf you add
sliding
class to thenavbar-inner
then all Navbar parts will have "Sliding" effectFor better look you should keep identic transition type for the same Navbar parts through different pages.
<!-- No additional classes, all elements will have "fade" effect on page transition -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link">Home Left</a>
</div>
<div class="title">Home</div>
<div class="right">
<a href="#" class="link">Home Right</a>
</div>
</div>
</div>
<!-- Title and Left will have "sliding" effect on page transition -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<!-- Additional "sliding" class -->
<div class="left sliding">
<a href="#" class="link">Home Left</a>
</div>
<!-- Additional "sliding" class -->
<div class="title sliding">Home</div>
<div class="right">
<a href="#" class="link">Home Right</a>
</div>
</div>
</div>
<!-- All parts will have "sliding" effect on page transition -->
<div class="navbar">
<div class="navbar-bg"></div>
<!-- Additional "sliding" class -->
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link">Home Left</a>
</div>
<div class="title">Home</div>
<div class="right">
<a href="#" class="link">Home Right</a>
</div>
</div>
</div>
Navbar App Methods
We can use following app methods available for Navbar:
app.navbar.hide(navbarEl, animate, hideStatusbar) | Hide navbar
|
app.navbar.show(navbarEl, animate) | Show navbar
|
app.navbar.size(navbarEl) | Recalculate positional styles for Navbar elements. It could be useful after you change some of Navbar elements dynamically.
|
app.navbar.getElByPage(pageEl) | Get navbar HTML element by specified page element. Useful only when dynamic navbar is enabled. In this case it is out of the page container.
|
app.navbar.getPageByEl(navbarEl) | Get page HTML element by specified navbar element. Useful only when dynamic navbar is enabled. In this case it is out of the page container.
|
app.navbar.collapseLargeTitle(navbarEl) | Collapse large navbar title
|
app.navbar.expandLargeTitle(navbarEl) | Expand large navbar title
|
app.navbar.toggleLargeTitle(navbarEl) | Toggle large navbar title
|
Navbar App Parameters
It is possible to control some default navbar behavior using global app parameters by passing navbar related parameters under navbar
parameter:
Parameter | Type | Default | Description |
---|---|---|---|
hideOnPageScroll | boolean | false | Will hide Navbars on page scroll |
showOnPageScrollEnd | boolean | true | Set to true to show hidden Navbar when scrolling reaches end of the page |
showOnPageScrollTop | boolean | true | Set to false and hidden Navbar will not become visible when you scroll page to top everytime. They will become visible only at the most top scroll position, in the beginning of the page |
scrollTopOnTitleClick | boolean | true | When enabled then every click on navbar's title element will scroll related page to the top |
iosCenterTitle | boolean | true | When enabled then it will try to position title at the center in iOS theme. Sometime (with some custom design) it may not needed. |
mdCenterTitle | boolean | false | When enabled then it will try to position title at the center in MD theme. Sometime (with some custom design) it may not needed. |
auroraCenterTitle | boolean | true | When enabled then it will try to position title at the center in Aurora theme. Sometime (with some custom design) it may not needed. |
collapseLargeTitleOnScroll | boolean | true | When enabled large title will be collapsed on page scroll top, and expanded again on top of the page. |
snapPageScrollToLargeTitle | boolean | true | When enabled it will snap page scroll to large title collapse/expand positions, so it will make impossible to leave page scroll in the middle of large title position. Has effect only when collapseLargeTitleOnScroll is enabled. |
snapPageScrollToTransparentNavbar | boolean | true | When enabled it will snap page scroll to transparent navbar size, so it will make impossible to leave page scroll in the middle of transparent navbar position. |
For example:
var app = new Framework7({
navbar: {
hideOnPageScroll: true,
iosCenterTitle: false,
},
});
Control Navbar With Page Classes
Framework7 allows you to hide/show Navbar on specific page or on specific page scroll by using additional classes.
If you want to hide navbar on page scroll on some specific page use additional classes on this page's <div class="page-content">
element:
hide-bars-on-scroll
- to hide both Navbar and Toolbar on page scrollhide-navbar-on-scroll
- to hide Navbar on page scroll
To disable this behavior on specific pages you may use the following additional classes:
keep-bars-on-scroll
- to keep Navbar and Toolbar on page scrollkeep-navbar-on-scroll
- to keep Navbar on page scroll
For example:
<div class="page">
<div class="navbar">
...
</div>
<!-- "hide-navbar-on-scroll" class to hide Navbar -->
<div class="page-content hide-navbar-on-scroll">
<div class="block">
<p>Scroll page down</p>
...
</div>
</div>
</div>
If you have common single Navbar across all pages/views of your app you can hide/show Navbar automatically for some pages where you don't need it.
To make it work all you need is to add no-navbar
class to loaded page (<div class="page no-navbar">
):
<!-- Page has additional "no-navbar" class -->
<div class="page no-navbar">
<div class="page-content">
...
</div>
</div>
Navbar Events
Navbar will fire the following DOM events on Navbar element (<div class="navbar">
) and app events on app instance:
DOM Events
Event | Target | Description |
---|---|---|
navbar:hide | Navbar <div class="navbar"> | Event will be triggered when Navbar becomes hidden |
navbar:show | Navbar <div class="navbar"> | Event will be triggered when Navbar becomes visible |
navbar:collapse | Navbar <div class="navbar"> | Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar) |
navbar:expand | Navbar <div class="navbar"> | Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar) |
App Events
Event | Arguments | Description |
---|---|---|
navbarHide | (el) | Event will be triggered when Navbar becomes hidden |
navbarShow | (el) | Event will be triggered when Navbar becomes visible |
navbarCollapse | (el) | Event will be triggered when Navbar with large title collapsed (from large navbar to usual navbar) |
navbarExpand | (el) | Event will be triggered when Navbar with large title expanded (from usual navbar to large navbar) |
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
Note that commented variables are not specified by default and their values is what they fallback to in this case.
:root {
/*
--f7-navbar-bg-color: var(--f7-bars-bg-color);
--f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
--f7-navbar-bg-image: var(--f7-bars-bg-image);
--f7-navbar-border-color: var(--f7-bars-border-color);
--f7-navbar-link-color: var(--f7-bars-link-color);
--f7-navbar-text-color: var(--f7-bars-text-color);
*/
--f7-navbar-hide-show-transition-duration: 400ms;
--f7-navbar-title-line-height: 1.2;
--f7-navbar-title-font-size: inherit;
--f7-navbar-subtitle-text-align: inherit;
--f7-navbar-large-title-line-height: 1.2;
--f7-navbar-large-title-text-color: inherit;
--f7-navbar-large-title-padding-left: 16px;
--f7-navbar-large-title-padding-right: 16px;
}
.ios {
--f7-navbar-height: 44px;
--f7-navbar-tablet-height: 44px;
--f7-navbar-font-size: 17px;
--f7-navbar-inner-padding-left: 8px;
--f7-navbar-inner-padding-right: 8px;
--f7-navbar-title-font-weight: 600;
--f7-navbar-title-margin-left: 0;
--f7-navbar-title-margin-right: 0;
--f7-navbar-title-text-align: center;
--f7-navbar-subtitle-font-size: 10px;
--f7-navbar-subtitle-line-height: 1;
--f7-navbar-shadow-image: none;
--f7-navbar-large-title-height: 52px;
--f7-navbar-large-title-font-size: 34px;
--f7-navbar-large-title-font-weight: 700;
--f7-navbar-large-title-letter-spacing: -0.03em;
--f7-navbar-large-title-padding-vertical: 6px;
/*
--f7-navbar-link-height: var(--f7-navbar-height);
--f7-navbar-link-line-height: var(--f7-navbar-height);
*/
--f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .theme-dark,
.ios.theme-dark {
--f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
--f7-navbar-height: 56px;
--f7-navbar-tablet-height: 64px;
--f7-navbar-font-size: 20px;
--f7-navbar-inner-padding-left: 0px;
--f7-navbar-inner-padding-right: 0px;
--f7-navbar-title-font-weight: 500;
--f7-navbar-title-margin-left: 16px;
--f7-navbar-title-margin-right: 16px;
--f7-navbar-title-text-align: left;
--f7-navbar-subtitle-font-size: 14px;
--f7-navbar-subtitle-line-height: 1.2;
--f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
--f7-navbar-large-title-font-size: 34px;
--f7-navbar-large-title-height: 56px;
--f7-navbar-large-title-font-weight: 500;
--f7-navbar-large-title-letter-spacing: 0;
--f7-navbar-large-title-padding-vertical: 8px;
/*
--f7-navbar-link-height: var(--f7-navbar-height);
--f7-navbar-link-line-height: var(--f7-navbar-height);
*/
--f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
}
.md .theme-dark,
.md.theme-dark {
--f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
}
.aurora {
--f7-navbar-height: 38px;
--f7-navbar-tablet-height: 38px;
--f7-navbar-font-size: 14px;
--f7-navbar-inner-padding-left: 16px;
--f7-navbar-inner-padding-right: 16px;
--f7-navbar-title-font-weight: 600;
--f7-navbar-title-margin-left: 0;
--f7-navbar-title-margin-right: 0;
--f7-navbar-title-text-align: center;
--f7-navbar-subtitle-font-size: 12px;
--f7-navbar-subtitle-line-height: 1;
--f7-navbar-shadow-image: none;
--f7-navbar-large-title-height: 38px;
--f7-navbar-large-title-font-size: 26px;
--f7-navbar-large-title-font-weight: bold;
--f7-navbar-large-title-letter-spacing: -0.03em;
--f7-navbar-large-title-padding-vertical: 4px;
--f7-navbar-link-height: auto;
--f7-navbar-link-line-height: inherit;
--f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
--f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
}
Examples
Static Navbar
<div class="page">
<div class="page-content">
<!-- Static Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Static Navbar</div>
<div class="right"></div>
</div>
</div>
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
...
</div>
</div>
</div>
Fixed Navbar
<div class="page">
<!-- Fixed/Dynamic Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Fixed Navbar</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
...
</div>
</div>
</div>
Transparent Navbar
<div class="page">
<!-- Transparent Navbar, has additional "navbar-transparent" class -->
<div class="navbar navbar-transparent">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Fixed Navbar</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
...
</div>
</div>
</div>
Large Title
<div class="page">
<!-- Additional "navbar-large" class on navbar -->
<div class="navbar navbar-large">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Large Title</div>
<!-- Large title element -->
<div class="title-large">
<div class="title-large-text">Large Title</div>
</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
...
</div>
</div>
</div>
Large Transparent
<div class="page">
<!-- Additional "navbar-transparent" class -->
<div class="navbar navbar-large navbar-transparent">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Large Transparent</div>
<!-- Large title element -->
<div class="title-large">
<div class="title-large-text">Large Title</div>
</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui, alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit similique!</p>
...
</div>
</div>
</div>
Navbar API
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Navbar API</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p><a class="button button-raised hide-navbar">Hide Navbar</a></p>
<p><a class="button button-raised show-navbar">Show Navbar</a></p>
<p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
...
</div>
</div>
</div>
var app = new Framework7();
var $$ = Dom7;
$$('.hide-navbar').on('click', function () {
app.navbar.hide('.navbar');
});
$$('.show-navbar').on('click', function () {
app.navbar.show('.navbar');
});
Hide On Scroll
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Hide On Scroll</div>
</div>
</div>
<!-- Additional "hide-navbar-on-scroll" class to hide navbar on scroll automatically -->
<div class="page-content hide-navbar-on-scroll">
<div class="block">
<p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
...
</div>
</div>
</div>