Version 12

    After many hours of research,and many cups of coffee, I was able to customize the navbar (yeah, the one up there at the top of the screen) and thought it would be helpful to share my experience. First, I would like to say that there are many different ways to add to the base userbar; you can use javascript/jquery to insert items or overlay a few templates and classes, the list goes on...


    This tutorial is not the definitive way to add to the userbar, but I think it is the recommended way as I have followed the steps outlined in the following docs:  How to: Add a Tab to a Place  Do you know Jive Fu? by Jive


    Ryan2 (Ryan King and Ryan Rutan) please let me know if I got anything wrong here.


    Ok, enough with the background, let's get to work.



    Are you ready?


    This is what you'll need to get started:

    • A development environment. Don't have one?  Check out Maven: Start Here
      • Make sure you follow the docs and create a plugin
    • Coffee... (This is good stuff Home - Philz Coffee) NOTE: Beer can be substituted if desired...



    Here we go


    You may have heard about Mergeable Collections and how it can be used to add new items to existing beans, well, since it's here, let use it.  We define our spring bean like so:


    <bean id="menuNavBarLinks" class="" scope="prototype" parent="navBarLinks">
            <property name="source">
                <util:list value-type="" scope="prototype">
                    <ref bean="menuLinksMenuLink"/>


    We just added the bean to the navBarLinks defined in spring-ui-components.xml. Cool right?


    You also see that the ref bean is menuLinksMenuLink which we define like this:


    <bean id="menuLinksMenuLink" class="com.pega.mesh.plugins.navbar.ui.MenuLink" parent="actionLinkBase" scope="prototype">
            <property name="ID" value="mesh-userbar-menu"/>
            <property name="url" value="#" />
            <property name="nameKey" value="Main Menu"/>
            <property name="nestedChildren" value="false" />
            <property name="children" ref="menuItems" />
            <property name="itemCss" value="menu-nav-menu-item"/>
            <property name="linkCss" value="j-globalNavLink j-ui-elem menu-nav-menu-link"/>
            <property name="iconCss" value="menu-nav-menu-icon"/>

    Now we have a new link in the navbar called "Main Menu"--the nameKey value defines the name of the navbar link.  In the bean above, there is a property called "children" that is a reference to another bean that will contain the actual links that will get displayed in the userbar.  Here is how we define that bean:


    <bean id="menuItems" class="" scope="prototype">
            <property name="source">
                <util:list value-type="" scope="prototype">
                    <bean class="com.pega.mesh.plugins.navbar.ui.MenuItemLink">
                        <property name="ID" value="product-menu-link"/>
                        <property name="url" value="#" />
                        <property name="nameKey" value="Product"/>
                        <property name="linkCss" value="main-menu-item"/>


    Ok, now you might be thinking "What about all the java classes?" Well, they are pretty simple, here is what we need to do:


    • Create the java class that the menuLinksMenuLink needs to make the item visible in the userbar


    package com.pega.mesh.navbar.ui;
    public class MenuLink extends NavMenuLink{
        public boolean isVisible() {
            return true;



    You can put other things in the MenuLink class, like auth checks, user checks, etc, but all I'm going to do right now is make the item visible.


    Now that everything is setup on the back-end, let's display the new link we created.


    Create a javascript file and make sure to take note of the name of the file.


    $j(function() {
         $j('#mesh-userbar-menu').click(function() {
                     context        : $j(this),
                     destroyOnClose : false,
                     putBack        : true
            return false;


    Now that we have the code to display it, we need to make sure that it gets called.  We do this by putting a resource reference in the plugin.xml.  You still have the file name for the js file right?


    Ok, all you have to do is add the following to your plugin.xml:


    <javascript src="/resources/script/your-file-name-goes-here.js"/>


    That's it! You should now have a new drop down in the navbar with a link contained within it.  Go ahead and click the drop down link and take a sip of the beverage you have from the prereqs.