Navigation bars with page groups

From The Smartest Wiki
Jump to: navigation, search

In Smartest, you can create a dynamic, orderable navigation bar from pages in your site.

1. Creating your page group

Let's label our page group "Main nav," which will be given a slug of 'main_nav', and add a few pages to it.

2. Displaying the page group in markup

Add code to your template that will loop through the page group:

<nav>
  <ul id="main-nav">
    <?sm:repeat from="pagegroup:main_nav" item="top_level_nav_page":?>
    <li><?sm:link to=$top_level_nav_page:?></li>
    <?sm:/repeat:?>
  </ul>
</nav>

This code simply loops through the group, linking to each page and displaying its title in the link.

3. Highlighting the current page/section

Now we are going to add highlighting to the navigation. Not all pages will necessarily be a part of the navigation. Ideally, something should always be highlighted, so the user knows where they are, but this depends on which pages are classed as section pages and which pages are included in your page group. if a page is not in the navigation but its section page is included, the section page will be highlighted:

<nav>
  <ul id="main-nav">
    <?sm:repeat from="pagegroup:main_nav" item="top_level_nav_page" assignhighlight="currentpage":?>
    <li><?sm:link to=$top_level_nav_page highlightpage=$currentpage highlightclass="current":?></li>
    <?sm:/repeat:?>
  </ul>
</nav>