How to add elements to the navbar?

Hi all

My goal is to add an element (button or link) to the top bar so that it would be visible on any page within SuiteCRM for logged-in users. This element would hold an onClick() to open a popup. The popup holds certain data that should be accessible on any page.

I would like to do this in a completely upgrade-safe way. I know I could just customize the template files and be done with it, but then I’d need to keep track of and apply future updates to the template file. I’m trying to avoid this, so is it possible to add buttons to the top bar in another way similar to vardefs or Menu.php in modules?

So far I’ve tried doing this with JS using by a couple of methods (insertAdjacentHTML is my latest tool) fired by an application logic hook in either after_ui_frame or after_ui_footer, but apparently it still gets overridden as the pageload advances. I guess I could play with CSS using negative margins and flots, but I’m hoping to find a more elegant solution.

Any ideas or pointers?

You can use the Global Logic hooks to insert you Link/Button into the Framework/Menu.
Check the file at


Thanks, but that doesn’t really cover it. AFAIK there is no logic hook in the application context that would fire at the appropriate time - but if I’m wrong, please do correct me! Both after_ui_frame and after_ui_footer are too late and I figure after_entry_point is too early. I also can’t figure out how to reposition the button in later hooks with JS – the button always seems to be off or getting overwritten, and position:absolute would be too prone to glitches.

You can modify the Footer Template to add JS which will be loaded for all page.

1 Like

Thanks, but that’s exactly what I’m trying to avoid; I wonder if this could be done theme-neutrally without touching the template files.

To make it clear, I’m trying to find a way to add a glyphicon (in this case) link to either div#toolbar (next to modules) or ul#toolbar(next to notifications, search etc), but the same use case might be with buttons. I know I could just add the link to the relevant template files, but then I’d need to maintain the custom versions of those files and, if possible, I’d like to avoid that here. (btw, I just noticed there are two html elements with the same id in SuiteP)

I’ve tried repositioning the link using JS, but something keeps rerendering the navbar and the link is lost once page is finished rendering. I’m a little lost with why that happens, but also think it’s an unstable hack and not a good solution so haven’t put too much thought into it yet. So does anyone know if there is a way to add new elements to the app-level navigation without theming?

Right now I’m circumventing the issue by adding an additional toolbar to the top of content with JS and logic hooks. The solution is best so far, but for getting a couple of buttons seems like a big cost in terms of viewpane.

have you tried to do changes in custom/themes/SuiteP/tpls/_headerModuleList.tpl file copying it from the main theme making it upgrade safe.
There are two menus in this, one is defined for Mobile view and the other for Desktop.

I know that. I’m trying to achieve the result without touching the templates or any theme files.