Hobo Cookbook

Renders a single item in a <navigation>.

<nav-item> is basically an <a> tag wrapped in an <li> tag. The attributes for <a> may all be used on this tag, and work the same way.

Example 1: explicit links. Note that we’re using explicit routes for clarity. Named routes are better.

<navigation current="home">
  <nav-item href="/">Home</nav-item>
  <nav-item href="/logout">Logout</nav-item>
</navigation>

Example 2: navigation based on a collection of items. Each item will be transformed into a link as described in <a>.

<navigation with="&links">
  <repeat>
    <nav-item/>
  </repeat>
</navigation>