Intelligent Tabbed Navigation

Making sure your visitors don’t get lost in your site is an important role of a web publisher such as yourself. Any site on the web that pays attention to usability uses some variation of breadcrumbs or tabbed navigation. These are great ways to give your visitors a way back to dry land if they get discombobulated.

Though you may not know it, Vogue is already setup for tabbed navigation. You won’t need to write any CSS or XHTML, just some Liquid logic to light the tags up. By the way, this tutorial assumes you’re using the version of Vogue downloaded from this site. Also, the navigation tabs are displayed from your main-menu linklist.

So, here we go. Open theme.liquid and locate the following block of code…

<div id="navigation">
    <ul id="navigate">{% for link in linklists.main-menu.links %}
        <li><a href="{{ link.url }}">{{ link.title }}</a></li>{% endfor %}
    </ul>
</div>

The code to insert is not displaying properly here, possibly due to textile, so you’ll need to retype the code from the following screenshot…

Each time Shopify iterates through the forloop, our logic checks to see if the next link to be displayed is equal to the page we’re currently on. If that’s the case, we add class="current" to the link tag. I’ve already prepared the styling in the CSS documents.

This set of logic covers most all cases – index, collections, pages, blogs, cart and search. For the blog links, make sure you title the link with the exact name of the blog. All the other pages check URL’s so the links can have different names than the page title, collection title, etc.

That’s all! Watch those tab’s tell you where you are.