Kyle's SharePoint Karate

Did you know that you can add icons to your SharePoint navigation menu items? It's not a supported out-of-the-box feature, but a little CSS and a lot of intuition can go a long way when it comes to styling a SharePoint site.

As with styling any CMS site, designers should always be concerned primarily with the output of a particular page they are trying to style. That means viewing a page's source code and determining what type of CSS classes you can use to style a particular page element. In the case of the SharePoint navigation menu, there are a number of layers, classes, and styles that you can utilize in order to make the menus appear just the way you'd like. Here's an image of my demo site's header area (the navigation menu has four items in it, one of which is "active" or selected):

Here is the HTML that SharePoint renders in order to produce the nicely formatted menu that you see above:

This navigation menu basically consists of a table and a corresponding table cell for each navigation item. The extra <td> tags that you see between each menu items are merely used for spacing and the "in between" items that SharePoint menus sometimes use, so they can essentially be ignored. What we should really be concerned with is the <td> table cells that are labeled with an ID that starts with "zz1_". These cells contain the actual links and text that are displayed when the SharePoint menu is rendered in your browser window. You may have noticed that the ID for each of these items are sequentially numbered (highlighted in yellow). For instance, the first navigation item has an ID of zz1_globalNavn0, and the second navigation item has an ID of zz1_globalNavn1, so on and so forth. We can use these sequential IDs to add background images to each particular navigation item! Here's the CSS that I added to my menu:

...and here is the result of my newly added CSS:

This can add some very impressive visual effects to your navigation menus. You can also use this technique on the current (left/right) navigation menu, but you'll find the ID of navigation items can change based on which menu you are styling.

The Bad: There's always a caveat, isn't there? The only problem with styling your navigation items in this fashion is that the icons don't actually follow the navigation item. For example, if I were to go into my navigation settings and swap the position of "Web Parts" and "Tabs," the text would change positions, but the icons would not. SharePoint always renders the first item with an ID that ends with 0, the second item ends with 1, etc. That means you can't tie an icon specifically to a particular navigation item, rather you're only styling the sequential order of items as they appear. It works really well on most sites, but if your navigation items are constantly changing or being updated, it's probably not a good route to go.