Navigation

Master

Wrap the nav in a navigation master, and wrap each item in a navigation-item whose comment carries the markup for both states, selected and not. Nothing is added to the live HTML; the keys and the two states live entirely in the comments:

<!-- localhoster:navigation name="primary" role="master" active="home"
     NOTE: Master copy — edit here.
     See: https://localhoster.org/automation/navigation/ -->
<nav><ul>
  <!-- localhoster:navigation-item key="home"
       when-selected:
       ```
       <li><a href="/" aria-current="page">Home</a></li>
       ```
       when-unselected:
       ```
       <li><a href="/">Home</a></li>
       ``` -->
  <li><a href="/" aria-current="page">Home</a></li>
  <!-- localhoster:/navigation-item key="home" -->
</ul></nav>
<!-- localhoster:/navigation name="primary" -->

Because both states are full markup snippets, the “selected” look can be anything, an attribute, a class, an extra element, however complicated, and any static markup between the items (a brand, a separator, a sub-nav title) is carried across untouched.

Copies

Every other page only declares which item is active; the script builds the entire nav from the master. The item templates live only on the master:

<!-- localhoster:navigation name="primary" role="copy" active="usage"
     NOTE: Generated — edit the master at: /index.html
     See: https://localhoster.org/automation/navigation/ -->
<nav>… built from the master, with “usage” selected …</nav>
<!-- localhoster:/navigation name="primary" -->