Heather Solomon's Blog

If you are working with the default navigation menus in SharePoint, you may come across the need to modify the sub menu arrow that appears to the right of the navigation text, see a screen shot: View image.

Usually the first thing you will do is a right-click -> Save Picture As... to grab the image name.  But with this one you will get "WebResource.gif".  Upon further inspection, you will find an image name in the page source and a JavaScript reference to WebResource.axd.

WebResource.axd is a .NET 2.0 function that allows you to embed resources such as images into your .NET project.  Great.  Not much help here then.

In order to alter this image, you just need to utilize an existing property in AspMenu (the navigation code that runs the SharePoint menu).  This will require an edit to your master page, so if you are just using a theme, this approach will not work.

1. Open your master page.  Preferrably a custom master page.  :-)
2. Switch to Code View.
3. Search for "TopNavigationMenu".  This should take you to the global navigation (top nav) instance of AspMenu. 
4. Using Intellisense in the code view, or using the Properties pane, add the following property to the AspMenu tag:
   
   DynamicPopOutImageUrl="insert image URL/path here"
   
   So your code should look like:
   <SharePoint:AspMenu
         ID="TopNavigationMenu"
         Runat="server"
         DataSourceID="topSiteMap"
         blah blah.....
         DynamicPopOutImageUrl="/images/myimage.gif"
         >

Here is a sample screenshot showing the address book icon in place of the arrow: View Image.


Thanks to Amit for posting this question to me!