Navigation

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>

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.