Add a CSS class to Magento menu links

Template file for link list menu

Ever wonder or ever hit your head on the wall what bloody template file controls the site link, footer link in Magento and how to add a class to it? That’s right, it’s the page/template/links.phtml.

The template file generates ‘first’ and ‘last’ class in li tag, but sometimes we need more styling in each individual link list and we want to add a class either in li or anchor tag without hacking the core file or extend a class in Magento core, how do we do that?

The answer is in the xml file

In the rss.xml file we found an example:

<action method="addLink" translate="label title" module="rss" ifconfig="rss/config/active"><label>RSS</label><url>rss</url><title>RSS testing</title><prepare>true</prepare><urlParams/><position/><li/><a>class="link-feed"</a></action>

The key is this line of code which will add a “link-feed” to a tag: 

<urlParams/><position/><li/><a>class="link-feed"</a>

Until recently we were not aware that the same links.phtml file also control the “Categories Sitemap” and ” Products Sitemap” links in SEO sitemap, when we tried to position the two sitemap links and wanted to avoid adding extra div as a wrapper like we did for footer.links and top.links. Upon testing, we also found a way to add a class to li element. See the screen shot A.



The key is <position> tag, without it , “seo-link” class will be added to li tag. Screen Shot B shows the code with <position>10</position>. In the screen shot A you can see that two classes are used in the li tag. The first one, with “first” class is generated from the “links.phtml”. You should remove it if you prefer to use class in li tag rather than anchor tag.

If no position needed, you can use a self close tag like so: <position/>