Navigation

Menu

By default, the nav element has the following styles: display:flex and justify-content: space-between;. Any link used in the navigation has no underline decoration by default.

If you need to organize multiple navigation groups, use more menu elements. menu is a semantic alternative to the ul element and can contain li with navigation elements.

Nav

Styles are applied to nav and its sub-elements only when it has at least one menu as a direct child.

<nav>
	<a href="/">Sugar.scss</a>
	<menu>
		<li><a href="/doc">Getting started</a></li>
		<li><a href="https://github.com/">Github</a></li>
	</menu>
</nav>

Nav Aside

When the nav is used in the aside element, navigation is ordered vertically.

<aside>
	<nav>
		<menu>
			<li><a href="#">Layout</a></li>
			<li><a href="#">Navigation</a></li>
			<li><a href="#">Grid</a></li>
		</menu>
	</nav>
<aside>