Lungo2.0.js/example/app/sections/layout.html

<section id="layout" data-transition="slide">
    <header data-title="Layout" data-back="home">
        <nav class="right">
            <button data-view-section="splash" data-async="app/sections/splash.html" data-label="splash"></button>
        </nav>
    </header>

    <nav data-control="groupbar">
        <a href="#" data-view-article="layout-art1" data-label="Profile" class="active"></a>
        <a href="#" data-view-article="layout-art2" data-label="Inbox" data-count="19"></a>
        <a href="#" data-view-article="layout-art3" data-label="Map"></a>
        <a href="#" data-view-article="layout-art4" data-label="Settings"></a>
    </nav>

    <article id="layout-art1" class="active"></article>
    <article id="layout-art2"></article>
    <article id="layout-art3"></article>
    <article id="layout-art4"></article>

    <footer>
        <nav>
            <a href="#" data-view-article="layout-art1" data-icon="home" class="active"></a>
            <a href="#" data-view-article="layout-art2" data-icon="inbox" data-count="80"></a>
            <a href="#" data-view-article="layout-art3" data-icon="comments"></a>
            <a href="#" data-view-article="layout-art4" data-icon="cog"></a>
        </nav>
    </footer>
</section>