-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
Subnavbar
Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Searchbar. It also remains visible when Navbar hidden
Subnavbar Layout
In Navbar
<div class="page page-with-subnavbar">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">...</div>
<div class="title">...</div>
<div class="right">...</div>
<!-- Subnavbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<!-- Subnavbar content, for example tabs buttons -->
<div class="segmented">
<a href="#tab1" class="button button-active">Tab 1</a>
<a href="#tab2" class="button">Tab 2</a>
<a href="#tab3" class="button">Tab 3</a>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="page-content">
...
</div>
</div>
Along with "left", "right" and "title" elements, "subnavbar" also supports "sliding" class for sliding transition when used with Dynamic Navbar.
Note that page that contains Subnavbar must have additional page-with-subnavbar
class which adds additional top padding required for subnavbar
In Page
It is also possible to put it as a direct child of page
right after Navbar:
<div class="page page-with-subnavbar">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">...</div>
<div class="title">...</div>
<div class="right">...</div>
</div>
</div>
<!-- Subnavbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<!-- Subnavbar content, for example tabs buttons -->
<div class="segmented">
<a href="#tab1" class="button button-active">Tab 1</a>
<a href="#tab2" class="button">Tab 2</a>
<a href="#tab3" class="button">Tab 3</a>
</div>
</div>
</div>
<!-- Page content -->
<div class="page-content">
...
</div>
</div>
In Page Content
It is also possible to put it as a direct child of page-content
. In this case it will be static and scroll with the page content:
<div class="page page-with-subnavbar">
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">...</div>
<div class="title">...</div>
<div class="right">...</div>
</div>
</div>
<!-- Page content -->
<div class="page-content">
<!-- Subnavbar -->
<div class="subnavbar">
<div class="subnavbar-inner">
<!-- Subnavbar content, for example tabs buttons -->
<div class="segmented">
<a href="#tab1" class="button button-active">Tab 1</a>
<a href="#tab2" class="button">Tab 2</a>
<a href="#tab3" class="button">Tab 3</a>
</div>
</div>
</div>
...
</div>
</div>
Example
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="title">Sub Navbar</div>
<div class="right"></div>
<div class="subnavbar">
<div class="subnavbar-inner">
<div class="segmented segmented-raised">
<a class="button tab-link tab-link-active" href="#tab1">Tab 1</a>
<a class="button tab-link" href="#tab2">Tab 2</a>
<a class="button tab-link" href="#tab3">Tab 3</a>
</div>
</div>
</div>
</div>
</div>
<div class="page-content hide-navbar-on-scroll">
<div class="tabs">
<div class="tab tab-active" id="tab1">
<div class="block">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="tab" id="tab2">
<div class="block">
<p>Donec iaculis posuere massa sed dignissim...</p>
</div>
</div>
<div class="tab" id="tab3">
<div class="block">
<p>Etiam non interdum erat. Curabitur erat lacus...</p>
</div>
</div>
</div>
</div>
</div>