Huesos
Style
Guide

Repositoire

GitHub

Preview

Menu

This menu is very opinionated and intented as a quick way to bootstrap a default-looking menu. If you need something more complex or different, consider developing your own solution.

We consider an horizontal menu as a component based on an extended <nav> or .nav.

Unlike the nav, which is a bare-bones item, the menu includes highlighting of links, a set of decoration items and handling of sub-menus.

It is expected that all items on a menu are linked. Empty links can be faked by adding a <span> item and combined with the .disabled class in order to indicate a deactivated link (see ‘Exit’)

Submenus are handled up to the 3rd level. If you need more levels, you’re gooing too deep and you might want to rethink your menu.

You can config the $menu-x-padding to set the menu item padding on left and right. $menu-kill-links to kill all links (defaults to true).

Set a $menu-background-color to set a global background, or set it to false to define it yourself.

$menu-font-size is by default set to $nav-font-size, but is exposed on a different variable so you can override it. Be aware that some vertical rhythm units are hardcoded and the menu won’t support huge font sizes.

In past editions of Huesos we tried to devise a way to handle background-color for the menu. We set a $menu-background-color and a $menu-color-ratio to derive shades from.

It was pointless. A menu can descend many leves and it can have tons of color strategies (involving contrasts, backgrounds, borders) on each level. Our solution would surely need to be overriden 90% of the time, generating more bloat and unneeded CSS.

We decided instead to go for a minimum viable menu. We only put a white background-color (it is needed to avoid transparency on nested levels) and let you freely decide how to style your own menu. We only provide functionality, not appearance

Menu + nav

You can quickly apply .nav values by just adding the class to your .menu. It will style the text and will be compatible with .menu.

.nav and .menu habe been designed to be able to work in pairs or separately. The first one takes care of styling the text, the second takes care of establishing a horizontal menu hierarchy.

Example

<section>
    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Section</a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Section</a></li>
                    <li class="menu-item--has-child">
                        <a href="#">Works</a>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Section</a></li>
                            <li><a href="#">Works</a></li>
                            <li><a href="#">About us</a></li>
                        </ul>
                    </li>
                    <li><a href="#">About us</a></li>
                </ul>
            </li>
            <li><a href="#">Works</a></li>
            <li><a href="#">About us</a></li>
            <li><span>Contact</span></li>
            <li><span class="disabled">Exit</span></li>
        </ul>
    </nav>
</section>

Assets

  • Filesystem Path: src/components/navigation/menu/_menu.scss
  • Size: 1.9 KB 
  • .menu {
  @if $menu-kill-links {
    a {
      @include kill-link-decoration();
    }
  }

  // All ul elements
  ul {
    @include inline-list();
    @if $menu-background-color {
      background-color: $menu-background-color;
    }
  }

  // All a and span elements
  a, span {
    display:inline-block;
  }

  // li
  ul > li {
    margin:0;
    position:relative;
    z-index:1;
    > a {
      text-align:left; // Override any .right class
      display:block;
      white-space:nowrap;

      @if $menu-kill-links {
        @include set-link(
          get-color(text, primary),
          get-color(text, primary),
          get-color(text, primary),
          get-color(text, primary),
          false,
          false
        )
      }
    }

    > a,
    > span {      
      padding:0 $menu-x-padding;
      @include ritmo-font-size($menu-font-size, 6);
    }

    // Second-level
    > ul {
      display:none;
      position:absolute;
      top:100%;
      left:0;
      z-index:2;
      min-width:120%;
      > li {
        display:block;
        position:relative;
        > a {
          display:block;
          padding:0 $menu-x-padding;
          white-space:nowrap;
        }
        > a,
        > span {
          @include ritmo-font-size(0.8 * $menu-font-size, 4);
        }
      }
    }
    // Third-level
    > ul > li {
      > ul {
        display:none;
        position:absolute;
        top:0;
        left:100%;
        min-width:100%;
        z-index:3;
        li {
          > a,
          > span {
            @include ritmo-font-size(0.7 * $menu-font-size, 4);
          }
        }
      }
      &:hover {
        > ul {
          display:block;
        }
      }
    }
    &:hover {
      > ul {
        display:block;
        > li {
          display:block;
        }
      }
    }
  }
}

.menu-item--has-child {
  @include arrow(
    'right', 
    0.25em, 
    get-color(text, primary),
    50%,
    1em
  );
}