Lungo2.0.js/examples/test/app/sections/navigation.html

<section id="navigation">
    <header data-back="home" data-title="Navigation">
        <nav class="onright">
            <a href="#navigation-index" class="button" data-target="section"><abbr>Transitions</abbr></a>
        </nav>
    </header>

    <footer class="toolbar with-labels">
        <nav>
            <a href="#nav-1" data-target="article" class="current" data-icon="user" data-label="User"></a>
            <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17" data-label="Calendar"></a>
            <a href="#nav-3" data-target="article" data-icon="mail" data-label="Emails" data-count="124"></a>
            <a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
        </nav>
    </footer>

    <article id="nav-1" data-title="Article 1"></article>
    <article id="nav-2" data-title="Article 2"></article>
    <article id="nav-3" data-title="Article 3"></article>
    <article id="nav-4" data-title="Article 4"></article>
</section>

<section id="navigation-secondary">
    <header data-back="left" data-title="Navigation"></header>

    <footer>
        <nav class="onright">
            <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
            <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
            <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
        </nav>
    </footer>

    <article id="nav-extra-1" data-title="Article 1"></article>
    <article id="nav-extra-2" data-title="Article 2"></article>
    <article id="nav-extra-3" data-title="Article 3"></article>
</section>