Salesforce Navigation with Bootstrap, Visualforce and APEX

Visualforce provides a number of components out of the box to easily present your data to end users. Occasionally you may want to leverage a framework like Bootstrap and other third party libraries to create a pixel perfect experience.

How do you access navigation to include within the page? The following is a snippet that I used in a recent project and you may find useful to get kickstarted on your awesome UI!

Sample Result with Bootstrap


APEX – JMBDashboard.cls

public with sharing class JMBDashboard {

	// Code from
	// Get tab set describes for each app
	List tabSetDesc = Schema.describeTabs();

	public class TabLinks {
		public String linkname {
			get {return linkname; }
			set {linkname = value; }						
		public String linkurl {
			get {return linkurl; }
			set {linkurl = value; }						

	public static List getTabs() {
		List appTabs = new List();
		Schema.DescribeTabSetResult[] tabSetDesc = Schema.describeTabs();
		// Iterate through each tab set describe for each app and display the info
		for(DescribeTabSetResult tsr : tabSetDesc) {
		    String appLabel = tsr.getLabel();
		    System.debug('Label: ' + appLabel);
		    System.debug('Logo URL: ' + tsr.getLogoUrl());
		    System.debug('isSelected: ' + tsr.isSelected());
		    String ns = tsr.getNamespace();
		    if (ns == '') {
		        System.debug('The ' + appLabel + ' app has no namespace defined.');
		    else {
		        System.debug('Namespace: ' + ns);
		    // Display tab info for the Sales app
		    // replace with your app name here
		    if (appLabel == 'My Performance') {
		        List tabDesc = tsr.getTabs();
		        System.debug('-- Tab information for the Sales app --');
		        for(Schema.DescribeTabResult tr : tabDesc) {
		            TabLinks myDetail = new TabLinks();		            
		            myDetail.linkname = tr.getLabel();
		            myDetail.linkurl = tr.getUrl();
		        return appTabs;
		return appTabs;

Visualforce –

With a little bit of effort, you can leverage the “Fixed Top” navigation Bootstrap example by including the following between the ul tags (e.g. <ul class=”nav navbar-nav”>).



Leave a comment