Liquid Guide: Global Navigation

Description

• Home: takes you to the homepage
• Stories: lists all stories created and published in the publication, with ability to sort
• Ideas: lists all submissions to the publication (see IdeasGuide)
• People: Lists every person who has ever logged in. The default display is Authors, but there are tools to filter to staff, or everybody, and sort by reputation, alpha-numeric, etc.
• About: This tab appears only when pages are created. It is always labeled “about” no matter the name of the pages under it.

In the templates
The display of the navigation is found in layout.liquid

<div id="SiteNav">
            {% for tab in current_site.navigation %}
              <span class="TabLeft"></span>
              {% case tab.state %}{% when  "current" %}
                <span class="activeLive">{{ tab.title }}</span>
              {% when "active" %}
                 <a href="{{ tab.url }}" class="active" accesskey="{{ tab.accesskey }}"><span>{{ tab.title }}</span></a>
              {% else %}
                <a href="{{ tab.url }}" accesskey="{{ tab.accesskey }}"><span>{{ tab.title }}</span></a>
              {% endcase %}
              <span class="TabRight"></span>
            {% endfor %}
          </div>   

In Boxes and Arrows they have added custom tabs that show up before the final “about” tab this way

  <div id="tabStrip">
                    <ul>
                        {% for tab in current_site.navigation %}
                          {% if forloop.index == 1 %}
                          {% else %}
                            {% if forloop.last %}
                            <li><a href="http://events.boxesandarrows.com/">Events</a></li>
                            <li><a href="http://jobs.boxesandarrows.com/">Jobs</a></li>
                          {% case tab.state %}
                            {% when "current" %}
                            <li><span>{{ tab.title }}</span><img src="{{ 'vert_arrow.gif' | asset_url }}" alt="{{ tab.title }}" /></li>
                            {% when "passive" %}
                            <li><a href="{{ tab.url }}">{{ tab.title }}</a></li>
                            {% when "active" %}
                            <li><span><a href="{{ tab.url }}">{{ tab.title }}</a></span></li>
                          {% endcase %}
                            {% else %}
                              {% case tab.state %}
                            {% when "current" %}
                            <li><span>{{ tab.title }}</span><img src="{{ 'vert_arrow.gif' | asset_url }}" alt="{{ tab.title }}" /></li>
                            {% when "passive" %}
                            <li><a href="{{ tab.url }}">{{ tab.title }}</a></li>
                            {% when "active" %}
                            <li><span><a href="{{ tab.url }}">{{ tab.title }}</a></span></li>
                          {% endcase %}
                            {% endif %}
                          {% endif %}
                        {% endfor %}
                        <li id="search">
                          <form action="/search" method="get" id="searchForm">
                            <input type="text" class="text input" id="searchinput" name="q" /><a href="javascript:document.getElementById('searchForm').submit();">Search</a>
                          </form></li>
                    </ul>
                </div>