Creating Icon-based Menus in RapidWeaver

Step by step directions on how to create visually compelling icon menus in RapidWeaver. Download the PDF.

1. Select your theme in RapidWeaver’s Theme Drawer

media_1286275080472.png

Right-click to reveal the contextual menu, and choose "Reveal Theme Contents in Finder…" (1). A new Finder window will open, displaying the core theme files.

2. Drag and drop your icons into the "images" folder.

Contents.png

Depending on the theme you’re using, the "images" folder may be named something else, like "editable_images", "graphics", etc. Remember the name of this folder, as you may need it for the next step.

3. Open TextEdit, and type in this short HTML snippet

Untitled_2.png

The %pathto()% syntax is a special keyword that RapidWeaver uses to create the URL to that image. Be sure to change the file name and extension (1) to match the icon you want to use. Then add the text you want displayed next to the icon for the page name (2).

If the folder you dragged your icons into (in Step 2 above) was named something else (like "graphics"), you’ll also need to edit the folder name in this snippet (3) to match.

4. Copy the snippet you created in TextEdit, and paste it into RapidWeaver as the page name.

media_1286277900552.png

You can also type in the snippet from Step 3 directly into RapidWeaver. But it’s much easier to see and edit the snippet in TextEdit (or some other text editing program), and then copy and paste it into RapidWeaver.

5. Preview the page in RapidWeaver to see your icon menu

media_1286278137981.png

Congratulations, you now have a working icon menu! Repeat Steps 1-4 for the remaining pages in your site.

Enhance Your Icon Menu Further

media_1286361555447.png

This is what our completed icon menu looks like, after repeating Steps 1-4 above to add a couple more pages.

1. Increase the spacing between the icons and the page names

media_1286361947595.png

See how close the text and icon are (1)? Let’s add some space between them, so it looks better and is easier to read.

2. Open the HTML snippet you created ealier, and add the following code

media_1286362261992.png

This "padding" code (1) will put some extra space between your icon and text. You can adjust the value to something else – like 10px for example, rather than 5px.

3. Copy & paste the updated snippet into RapidWeaver, then Preview the page

media_1286365274089.png

You should now see some space between the icon and text. Repeat Steps 1-2 for the remaining pages in your site.

4. Finally, check if your theme has any specific icon-based menu features

media_1286362662776.png

The Dexture RapidWeaver theme from NimbleHost has a built-in option for an Accordion-style menu, which is perfect for creating icon based menus. Check if the theme you’re using has similar functionality.

{ 12 comments… read them below or add one }

wbullard October 7, 2010 at 8:52 pm

Really helpful. Muchas gracias.

Reply

RWPro October 11, 2010 at 2:09 pm

My pleasure!

Jonathan

Reply

yolanda January 24, 2011 at 10:54 pm

I was asking for this on the RW forum and they told me about this great tutorial.

Would like to thank you for this. Great job!

Muchas gracias,

Yolanda

Reply

RWPro January 28, 2011 at 2:35 am

My pleasure, Yolanda. 🙂

Reply

niguli April 24, 2012 at 9:42 am

WOW ! very easy and nice tutorial. Just one question: is there the possibility to avoid having the images also in the breadcrumps menu ? Look at the main navigation menu and at the breadcrumps in the footer of this sample page http://www.lecarabattole.com/servizi-bed-and-breakfast/servizi-bed-and-breakfast.html 🙁

Reply

RWPro April 25, 2012 at 2:54 am

Hi Niguli,

Hiding the images in the breadcrumb menu will require adding css code to the Page Inspector –> Header –> CSS –> Custom CSS field. The code required will be different depending on the theme you are using. In your case the code would be this:

footer ul li a img { display: none; }

However, if you switch to a different theme, that code will almost certainly not work, as each theme uses a unique structure, with different class and id names for various elements.

Hope this helps.

Reply

DP October 15, 2013 at 11:28 am

Hi – this looks great but it does not show how you add a link to the menu, that is, as you are not displaying the icon, it is not possible to use the add link option in RW – instead I assume you can do this manually and reference the page you want to link to in some special rapidweaver format so as not to add a hard link.

it seems from the above you don’t have a working menu at all, just displayed an icon with no interaction (I assume also we should use resources form RW5 and above).

Reply

admin October 14, 2014 at 7:29 pm

RW handles the link creation for you automatically, which is why it’s not mentioned in this article. 🙂

Reply

D August 13, 2014 at 3:08 pm

I am interested in purchasing your software but I cannot find any tech support. Since you have no tech support information listed. I will decline the sale.

Respectfully

Lost sale

Reply

admin August 13, 2014 at 5:31 pm

Could you clarify who’s software you are referring to exactly? This website is purely for educational purposes and does not sell any products. If you’d like more information about NimbleHost, who sponsors this tutorial site, please visit them here: http://www.nimblehost.com.

You’ll notice that NimbleHost has an excellent reputation for customer support, and their support page is easily located in the main menu.

Reply

Adrian October 13, 2014 at 1:31 pm

Hi,
i was very happy to find your Tutorial but unfortunately it doesn’t work for me. I’m using RapidWeaver 5.3.2 and put the code ( Home) into RapidWeaver instead of the Pagename but there are no Icons showing up. Not in my bought Theme neither in any other bought Theme of Rapidweaver (All from Multithemes.com). Of course the Icons are in the Folder “navicons” under the Folder “images” of the Theme. What am i doing wrong? Any help is highly appreciated. Thanks in advance.

Reply

admin October 14, 2014 at 7:34 pm

Hi Adrian,

It’s difficult to troubleshoot the exact problem without seeing your project file. However, you mention the icons are in a sub-folder called “navicons”, so the code representing the path to the icons should look like this:

%pathto(images/navicons/your-icon.png)%

Hope this helps.

Reply

Leave a Comment

© 2010 RapidWeaver.pro & NimbleHost