IPython custom.js / custom.css for building a basic outline of header cells in the View menu.

custom.css

.ui-menu {
    width: 300px !important;
}

custom.js

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    var view_menu = $($('ul#menus > li > ul').get(2));

    var render_toc = function() {
        // remove existing toc render
        view_menu.find('.toc').remove();
        view_menu.append('<hr class="toc" />');

        IPython.notebook.get_cells().forEach(function(cell, cell_num) {
            if(cell.cell_type !== 'heading') return;
            var text = cell.get_text();
            if(cell.get_level() > 1) {
                text = '&#x2514;' + text;
            }
            for(var i=1; i<cell.get_level(); i++) {
                text = '&nbsp' + text;
            }
            var mi = $('<li class="toc"><a href="#">'+text+'</a></li>');
            view_menu.append(mi);
            mi.click(function() {
                console.log(cell_num);
                IPython.notebook.scroll_to_cell(cell_num, 250);
            });
        });
        view_menu.data('menu').refresh();
    };


    $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
        render_toc();
    });

    render_toc();
});

Hi, I'm quite new to the ipython notebook and was looking for something like this. Is there an easy way I can get this on my notebooks? Right now I have no clue where this should go.

Hi, sorry, just seeing this comment now for some reason. I'm not sure if this code works in IPython Notebook v1.0 or higher. You should put it in your IPython profile folder, like ~/.ipython/profile_default/static/custom/*