« « Preassembled Minty Boost USB Phone Chargers Available | Android Controlled Roomba – Telepresence Robot Demo » »

Adding a Class for Current Page in Force.com Visualforce Header

Feb 12, 2013 by     No Comments    Posted under: Uncategorized

I’m working on a site using Salesforce’s force.com. I have a global header file that is used on every page, and includes the top navigation for the site. I needed a way to add a class to the current page’s link to make it appear selected. For something that should have been incredibly easy, it actually took a long time to figure out since Visualforce uses their own <apex> tags with their own classes and not a lot of documentation. Here’s how you do it:

<li><apex:outputLink value="{!$Page.myFirstPage}" styleClass="{!if($CurrentPage.name == 'myFirstPage' ,'current','')}">Awesome First Page</apex:outputLink></li>
<li><apex:outputLink value="{!$Page.mySecondPage}" styleClass="{!if($CurrentPage.name == 'mySecondPage' ,'current','')}">Cool Second Page</apex:outputLink></li>
<li><apex:outputLink value="{!$Page.myThirdPage}" styleClass="{!if($CurrentPage.name == 'myThirdPage' ,'current','')}">Rad Third Page</apex:outputLink></li>
<li><apex:outputLink value="{!$Page.myFourthPage}" styleClass="{!if($CurrentPage.name == 'myFourthPage' ,'current','')}">Neato Fourth Page</apex:outputLink></li>

This will create four links to your four awesomely named pages, and add a class called “current” to the current page’s link.

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>