v1.6.5

Site

The site-menu starts as a basic horizontal menu that can be modified to fit a wide array of scenarios.

Demo

Markup

<nav class="site-menu">
  <a href="" class="site-menu__item"></a>
  <a href="" class="site-menu__item"></a>
  <a href="" class="site-menu__item"></a>
</nav>

Modifiers

Modifier † Secondary Modifier Behavior
background—{ color }Set menu background color and corresponding hover highlight.
hover-underline hover-underline—{ color } Add an underline effect on hover. The secondary modifier augments color.
site-menu—borderedAdd a horizontal border between menu items.

† The base class is always required.

Our site menu was built to be used in the header as a main site navigation. If you’d like to add a logo, apply the site-logo class.

Demo

Markup

<header class="site-header background--purple flex flex--align-center">
  <a class="site-logo p-2">
    <img src="/images/platform-ui.svg" alt="Platform UI"/>
  </a>
  <nav class="site-menu hover-underline hover-underline--white h-100 flex flex--grow flex--align-center text--white px-2">
    <a href="" class="p-2 site-menu__item">Docs</a>
    <a href="" class="p-2 site-menu__item">Icons</a>
    <a href="" class="p-2 site-menu__item">Launchpad</a>
  </nav>
</header>

When using the utility text--white as a modifier on site-menu, all site-menu__item links inherit text--white.

Requires JavaScript

Sub-menus are accomplished via the dropdown.

Modifiers

Modifier † Behavior
dropdown--centered

Centers content of the dropdown sub-menu.
dropdown--right

Justifies both the surrounding dropdown container and content to the right.

† The base class is always required.

Demo

Markup

<nav class="site-menu background--lightblue">
  <a href="" class="p-3 site-menu__item">About</a>
  <div class="dropdown">
      <div class="p-3 site-menu__item dropdown__trigger">Fruits<i class="ml-1 pi-angle-down"></i></div>
      <div class="dropdown__content">
        <a href="" class="dropdown__content-item">Dragonfruit</a>
        <a href="" class="dropdown__content-item">Kiwis</a>
      </div>
    </div>
</nav>

fixed

To set a fixed-position header menu (like the one this site uses), wrap site-menu in an element with the site-header class and add the modifier site-header--fixed.

Markup

<header class="site-header site-header--fixed">
  <a class="site-logo">
    <img src="..." alt="Platform UI"/>
  </a>
  <nav class="site-menu">
    <a href="" class="site-menu__item">Docs</a>
    <a href="" class="site-menu__item">Icons</a>
    <a href="" class="site-menu__item">Launchpad</a>
  </nav>
</header>