<ul id="menu">
    <li><a data-bind="navigationLink: 'article'">Articles</a></li>
    <li><a data-bind="navigationLink: 'book'">Books</a></li>
</ul>
<div id="content">
    <div data-bind="if: mode() == 'articles'"> 
        <ul id="articles" data-bind="foreach: articles">
            <li>
                <span data-bind="text: title" ></span>
                <div>By <span data-bind="text: author"></span></div>
            </li>
        </ul>
    </div>
</div>
body{
    font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
    padding:0 2%;
    margin:0 auto 10px auto;
    max-width:600px;
    width:96%;
    background-image:url(http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/assets/images/smbg.png);
}
#content{
    background-color:#fff;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}
ul{
    list-style-type:none;
    margin:0;
    padding:0;
    clear:both;
}
ul a {
    display:block;
    text-align:center;
}
#menu li:first-child a{
    width:150px;
    height:30px;
    padding:25px 10px;
    background-color:#fff;
    background-image:url(http://media.mediatemple.netdna-cdn.com/wp-content/themes/smashing-magazine/assets/images/logo.png);
    background-size:143px 37px;
    background-repeat:no-repeat;
    color:transparent;
    background-position:10px 20px;
}
#menu{
    height:80px;
}
#menu li{
    float:left;
}
#menu li:nth-child(2) a{
    width:80px;
    padding-top:40px;
    padding-bottom:20px;
    color:rgba(0,0,0,.3);
    border-right:1px solid #e5e5e5;
    text-decoration:none;
}            
#articles{
    padding:30px;
}
#articles li{
    padding:10px 0;
    font-size:1.25em;
    border-bottom:1px solid #e5e5e5;
}
#articles li > span{
    font-family:Georgia,"Times New Roman",Times,serif;
    display:block;  
}
#articles li div{
    font-size:0.75em;
    padding-top:5px;
    color:rgba(0,0,0,.3);
}
function ViewModel(){
    var self = this;
    self.mode = ko.observable();
    self.articles = ko.observableArray();
    self.showArticles = function(){
        self.mode('articles');
        var articles = getArticles();
        self.articles(articles);
    };
    self.showBooks = function(){
        self.mode('books');
    };
    
    var articleDialog = Navigation.StateInfoConfig.dialogs.article;
    var articleListState = articleDialog.states.list; 
    articleListState.navigated = self.showArticles;
    var bookDialog = Navigation.StateInfoConfig.dialogs.book;
    var bookListState = bookDialog.states.list; 
    bookListState.navigated = self.showBooks;
}    
var articleDialog = {
    key: 'article', initial: 'list', states: [
        { key: 'list', route: '' }
    ]
};
var bookDialog = {
    key: 'book', initial: 'list', states: [
        { key: 'list', route: 'books' }
    ]
};
Navigation.StateInfoConfig.build([ articleDialog, bookDialog ]);
ko.applyBindings(new ViewModel());
Navigation.start();

function getArticles(){
    return [
        { 
            title: 'Designers And Developers: No Longer A House Divided', 
            author: 'Ivana McConnell', 
            category: 'coding' 
        },
        { 
            title: 'A Better Way To Design For Retina In Photoshop', 
            author: 'Murdoch Carpenter', 
            category: 'design' 
        },
        { 
            title: 'Extending In Sass Without Creating A Mess',
            author: 'David Khourshid', 
            category: 'coding' 
        },
        { 
            title: 'Creating A Complete Web App In Foundation For Apps', 
            author: 'Stephen Saucier', 
            category: 'coding' 
        },
        { 
            title: 'Design Principles: Compositional Flow And Rhythm', 
            author: 'Steven Bradley', 
            category: 'design' 
        },
        { 
            title: 'An In-Depth Overview Of Living Style Guide Tools', 
            author: 'Robert Haritonov', 
            category: 'design' 
        },
        { 
            title: 'React To The Future With Isomorphic Apps', 
            author: 'Jonathan Creamer', 
            category: 'coding' 
        },
        { 
            title: 'Web Scraping With Node.js', 
            author: 'Elliot Bonneville', 
            category: 'coding' 
        },
        { 
            title: 'On China\'s Bleeding Edge: Web Design Trends 2015',
            author: 'Kendra Schaefer', 
            category: 'design' 
        }
    ];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js
  2. https://grahammendick.github.io/navigation/download/navigation-1.0.0.js
  3. https://grahammendick.github.io/navigation/download/navigation.knockout-1.0.0.js