← Templates / Tabs Starter
The most popular mobile layout: a persistent bottom tab bar that switches between three top-level sections. The Tabs Starter wires up the navigation, the active states and three placeholder screens so you can jump straight to building features.
The demo is the real starter, running straight from templates/tabs/ — tap the tabs to try it.
Bottom tab bar with three ready-made sections — Home, Search and Profile.
Active-state handling so the current tab is always highlighted.
Per-tab pages you can rename, duplicate or replace.
Self-contained app.css with zero external dependencies — copy the folder and go.
Scaffold a new project based on the Tabs Starter:
cordova create myApp com.dedris.myapp MyApp --template cordova-template-dedris-tabs
cd myApp
cordova run androidEach tab is a link whose data-page names the partial to load and whose data-title fills the header.
<nav class="tabbar" role="tablist">
<a class="tabbar__tab" href="#home" data-page="home" data-title="Home">
<span class="tabbar__ic">⌂</span>
<span class="tabbar__lbl">Home</span>
</a>
<!-- Search & Profile tabs follow the same shape -->
</nav>No framework, no build step — a few lines read the hash, load the page partial and keep the UI in sync.
// Load the partial for a tab, then cache it for next time.
function loadPage(page) {
setActiveTab(page);
if (cache[page]) return render(cache[page]);
fetch("pages/" + page + ".html")
.then(function (res) { return res.text(); })
.then(function (html) {
cache[page] = html;
render(html);
});
}
// Re-render whenever the tab (URL hash) changes.
window.addEventListener("hashchange", function () {
loadPage(currentPage());
});