Navigation Example
JSON navigation
{
"children": [{
"label": "Home",
"href": "/home"
}, {
"label": "About",
"href": "/about"
}, {
"label": "Clients",
"href": "/clients",
"children": [{
"label": "Lorem",
"href": "/clients/lorem"
}, {
"label": "Ipsum",
"href": "/clients/ipsum"
}]
}, {
"label": "Contact Us",
"href": "/contact-us"
}]
}
PHP
<?php function navigation ($navigation) {
print ('<ul'.($navigation->parent ? ' class="child-menu"' : '').'>');
foreach ($navigation->children as $item) {
print ('<li>');
print ('<a href="'.$item->href.'"'.($item->active ? ' class="active"' : '').'>'.$item->label.'</a>');
if ($item->children) {
$item->parent = $navigation;
navigation ($item);
}
print ('</li>');
}
print ('</ul>');
} ?>
<nav>
<?php navigation ($navigation); ?>
</nav>
SML
nav {
ul:if(@navigation.parent):then(.child-menu):each(@navigation.children as @item) {
li {
a:link(@item.href):if(@item.active):then(.selected) {
@item.label
}
if(@item.children) {
goto(ul, @item.parent = @navigation, @navigation = @item)
}
}
}
}
HTML beautified
<nav>
<ul>
<li>
<a href="/home">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/clients">Clients</a>
<ul class="child-menu">
<li>
<a href="/clients/lorem">Lorem</a>
</li>
<li>
<a href="/clients/ipsum">Ipsum</a>
</li>
</ul>
</li>
<li>
<a href="/contact-us">Contact Us</a>
</li>
</ul>
</nav>