Search code examples
gruntjshandlebars.jsassemble

Navigation using Assemble

Part I

I created a 'static' navigation in my handlebar file for the header (header.hbs - below). I'd like to create this simple, one-level navigation using handlebars (which I'm new too currently). Also would like to add an "active" class based on the page the user is on.

<nav class="left">
  <ul>
    <li><a href="index.html" title="Home">Home</a></li>
    <li><a href="products.html" title="Products">Products</a></li>
    <li><a href="find-us.html" title="Find Us">Find Us</a></li>
  </ul>
</nav>

Part II

I was able to get this working (see answer below). How does one achieve sort-order? Right now the links seem to be in random order.

Solution

  • I should have RTFM :)

    There's a whole section in the FAQ for this exact thing, ha! Go figure.

    {{#each pages }}
  {{#is data.section "main"}}
    <li{{#is ../../page.dest this.dest}} class="active"{{/is}}>
        <a href="{{relative ../../page.dest this.dest}}">{{data.menutitle}}</a>
    </li>
  {{/is}}
{{/each}}

    http://assemble.io/docs/FAQ.html