NeXTSTEP Programming Mastermind
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    active-menupublic

    Active Menu

    About

    Active Menu is a module for NodeJS that facilitates the creation of menus in Node applications, specifically (but not limited to) Express.

    Inspired by the CMenu widget for the PHP framework Yii (viewable here) as well as the menu markup from Magento's top menu system.

    The menu, when rendered will apply the proper active classes depending on the current route of the application. For example, when the user is on the route /admin/posts, the <a> tag and all parents of that tag (<ul> and <li>) will also be given the active class. This makes applying CSS for menu items which relate to the current route quite simple.

    Example

    A simple example using Active Menu for a blog's admin panel:

    // Require Active Menu
    var activeMenu = require('active-menu');
    // Create a New Instance
    var adminMenu = new activeMenu('adminMenu');
    // Set HTML Attributes for the Top <ul> element
    adminMenu.setAttributes({class : 'menu', id : 'admin-menu'});
    
    // Home Node
    var homeNode = adminMenu.addMenuNode('Home', '/admin');
    homeNode.setAttributes({class : 'home home-icon', id : 'home-link'});
    
    // Posts Node and Children
    var postsNode = adminMenu.addMenuNode('Posts', '/admin/posts');
    postsNode.setAttributes({class : 'posts posts-icon'});
    
    var newPostNode = postsNode.addMenuNode('New Post', '/admin/posts/new');
    newPostNode.setAttributes({class : 'new-post new-icon'});
    
    // Settings Node
    var settingsNode = adminMenu.addMenuNode('Settings', '/admin/settings');
    settingsNode.setAttributes({class : 'settings cog-icon'});
    
    // Use Menu
    app.use(adminMenu.menu);
    

    When app.use(...) is called for adminMenu.menu, it adds the menu instance to res.locals which is then accessible through the Jade templating engine. Simple put !=adminMenu in your template and it will render the menu as part of the HTML.

    You can also get the HTML for the menu by calling adminMenu.toString().

    Result

    The above example would produce the following output:

    <ul class="menu" id="admin-menu">
        <li class="home home-icon level-0 first" id="home-link">
            <a href="/admin">Home</a>
        </li>
        <li class="posts posts-icon level-0 parent">
            <a href="/admin/posts">Posts</a>
            <ul class="level-1">
                <li class="new-post new-icon level-1 only">
                    <a href="/admin/posts/new">New Post</a>
                </li>
            </ul>
        </li>
        <li class="settings cog-icon level-0 last">
            <a href="/admin/settings">Settings</a>
        </li>
    </ul>

    Keywords

    none

    install

    npm i active-menu

    Downloadslast 7 days

    8

    version

    0.1.2

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar