Salesforce Navigation with Bootstrap, Visualforce and APEX

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

bootstrap-sample

APEX – JMBDashboard.cls

Visualforce – JMBDashboard.page

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”>).