Navigation
A navigation is duplicated like any block, with one extra step: each copy highlights the item for the page it sits on. The whole nav is defined once, on a master; every other page is built from it.
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:
<!-- sitehoster:navigation name="primary" role="master" active="home"
NOTE: Master copy — edit here.
See: https://sitehoster.org/automation/navigation/ -->
<nav><ul>
<!-- sitehoster: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>
<!-- sitehoster:/navigation-item key="home" -->
</ul></nav>
<!-- sitehoster:/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:
<!-- sitehoster:navigation name="primary" role="copy" active="usage"
NOTE: Generated — edit the master at: /index.html
See: https://sitehoster.org/automation/navigation/ -->
<nav>… built from the master, with “usage” selected …</nav>
<!-- sitehoster:/navigation name="primary" -->node client/automate.js.Groups
If this site belongs to a group, a navigation master and its copies are shared across every site in the group — one menu across a family of sites, each copy still highlighting its own page. On a standalone site it stays within that site.