How to Create a Custom Navigation Bar

The RTML Tip section is intended for advanced Turbify users. It assumes that you have a basic understanding of how custom templates work and how to enter and change templates. If you are new to RTML, we recommend that you purchase one of the RTML books available here or at www.monitus.com. Look at http://www.ytimes.info/howtomodtem.html for a brief tutorial on how to modify and use customized templates.

The following example shows you how to replace the built-in graphical navigation bar with one that has regular text hyperlinks. To do this, you will need to create two custom templates and modify a built-in one.

The two custom templates to create are my-nav-bar and text-button. My-nav-bar is the template that will generate the navigation buttons (hyperlinks) based on the button settings in the store (the Buttons property of the home page and the Nav-buttons global variable.) This template is loosely based on the built-in nav-button template so it is easier to first copy that template and then change it to match the one shown below.


My-nav-bar ()

FOR-EACH variable but sequence OR @buttons @nav-buttons SWITCH but :help CALL :text-button "Help" ACTION :help :search CALL :text-button WITH-OBJECT :nsearch @name TO :nsearch :index CALL :text-button "Index" TO :ind :info CALL :text-button @info-text TO :info :show-order CALL :text-button @show-order-text ACTION :show-order :empty CALL :text-button "" nil :up CALL :text-button "Up" TO OR up :index :next CALL :text-button "Next" TO next :home CALL :text-button @title TO :index :request CALL :text-button @request-text ACTION :request :register CALL :text-button "Register" ACTION :register :download CALL :text-button "Download" ACTION :download :contents WITH-OBJECT :index FOR-EACH-OBJECT @contents CALL :text-button @name TO id :email WHEN NONEMPTY @email CALL :text-button "Email" ACTION :email
The next template, text-button, simply creates a hyperlink. It also puts a vertical space below the link. The height of this vertical space will be controlled by the value of the button-edge-width variable (but you can change this to suit your needs.) Please note that in your store you will have to replace yourstoreid with the Yahoo! ID of your own store.

Text-button (label link)

WITH-LINK link TEXT label CALL :yourstoreid-vspace @button-edge-width
Finally, you'll need to change your copy of the side-nav template.
 
Change your side-nav template from this... ... to this:

Yourstoreid-side-nav (vnav)

TABLE-CELL IMAGE source vnav antialias-color @button-edge-color TABLE-CELL SHIM height 1 width 26

Yourstoreid-side-nav (vnav)

TABLE-CELL CALL :my-nav-bar TABLE-CELL SHIM height 1 width 26