Huesos
Style
Guide

Repositoire

GitHub

Preview

Nav

<nav> elements won’t receive any styling by default until a .nav class is added. This class performs a minimal, common styling to make it look like a menu.

We don’t assume a horizontal navigation as the default. This is done by adding the .menu class.

Instead, we only style the text and delete the bullets. The nav items’ style can be controlled on _config.scss via a set of parameters on the Navigation section: $nav-font-weight, $nav-uppercase, $nav-font-size and $nav-spacing.

In previous versions, we forced <nav> elements to behave like the common horizontal menus. It was very opinionated, so we separated .nav from .menu.

A nav component is supposed to hold links, but it can also have empty elements.

It is common the need to disable partially or totally the link appearance. You can either use kill-link or kill-link-decoration classes/mixins or set $nav-kill-links: true for a global override of decoration styles.

Example

<section>
    <!-- IMPORTANT! The class is needed -->
    <nav class="nav">
        <ul>
            <li>Home</li>
            <li><a href="#">Section</a></li>
            <li>Works</li>
            <li>About us</li>
            <li>Contact</li>
            <li>Exit</li>
        </ul>
    </nav>
</section>

Assets

  • Filesystem Path: src/components/navigation/nav/_nav.scss
  • Size: 373 Bytes 
  • .nav {
  @if $nav-kill-links {
    a {
      @include kill-link-decoration();
    }
  }
	ul {
    padding:0;
    margin:0;
    list-style-type:none;
		li {
      margin: 0;
      font-weight: $nav-font-weight;
      @if $nav-uppercase {
        text-transform: uppercase;
      }
      @include ritmo-font-size($nav-font-size);
      letter-spacing:$nav-spacing;
		}
  }
}