Set Class for Current Page

Squiz Matrix Support
1

I am having Matrix create the main navigation for a site based on the page assets. In the menu, when I click on a link, I would like that active link to have different styling by adding a class to it -- such as "current" or "selected".

 

I have searched the manuals and forum for the answer and nothing. That is built-in functionality in every other CMS I've used and I can't imaging it's not here. It's even being used in The Matrix user manuals.

 

If anyone knows how to do this, your help will be much appreciated.

 

Thanks.

2

Yeah, you can easily do this:

<mysource_area id_name="main_menu" design_area="menu_normal" print="yes">
    <mysource_set name="level" value="top" />
    <mysource_set name="settings.class.normal" value="normal" />
    <mysource_set name="settings.class.current" value="selected" />
    <mysource_set name="settings.class.hierarchy" value="hierarchy" />
    <ul id="nav">
      <mysource_asset>
        <li><a id="n<mysource_print var="assetid" />" class="<mysource_print var="settings.class" />" href="<mysource_print var="asset_link" />"><mysource_print var="asset_short_name" /></a></li>
      </mysource_asset>
    </ul>
</mysource_area>
 
3

I think you are after this page: http://manuals.matrix.squizsuite.net/designs/chapters/menu-normal-design-area 
More specifically this section:

settings..: this variable allows you to change the
format of the items in the menu based on which page the user is
currently viewing. For example, using the example structure shown in the
figure to the right, say the user was viewing the Department 2 Products page. By using this variable you can change the format of the Department 2 Products page in the menu by using a different CSS class. You can also change the format of its parent pages (i.e. the Deparment 2
page) by using a different CSS class. There are three different levels
that you can format by using this variable. The levels are as follows:

  • normal:
    this is the default format to use for the menu items that are not part
    of the hierarchy or is not the current page that user is viewing.
  • hierarchy: this format is used for the menu items that are in the lineage for the current page the user is viewing.
  • current: this format is used for the current page the user is viewing.
You need to include all three levels within the design area in order for it to work.
Using the example structure shown in the figure above, if the user was viewing the Department 2 Products page, the current format will be used for the Department 2 Products page. The hierarchy format will be used for the Department 2 and About Us pages. The normal format will be used for the Home, Department 1, and Products pages. The code to produce this menu format is shown below.


* Edit: Wow beaten by Quick Draw Nic, the faster Matrix forum poster in history!

4

Awesome. Thanks to Nick and Benjamin. I knew it could do it but just couldn't find it. I really appreciate it.