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

<section id="layout" data-transition="slide">
    <header data-title="Layout" class="extended">
        <nav class="box">
            <a href="#back" data-router="section" data-label="Back"></a>
        </nav>
        <nav class="right">
            <a href="#splash" data-router="section" data-async="app/sections/splash.html" class="button" data-icon="user" data-label="Splash"></a>
        </nav>
    </header>

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

    <footer>
        <nav>
            <a href="#layout-art1" data-router="article" data-icon="home" class="active"></a>
            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="80"></a>
            <a href="#layout-art3" data-router="article" data-icon="compass"></a>
            <a href="#layout-art4" data-router="article" data-icon="settings"></a>
        </nav>
    </footer>

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