v1.8.2

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-underlinehover-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.

Header Fixed

If you want to make your header fixed, add the classes .site-header.site-header--fixed to your header. This will give the proper styles to your header to fix it to your window.

To ensure that your page has the proper spacing and accounts for the size of the fixed header, add the class header-fixed to your main content or whatever the next sibling of your header is.

Markup

<header class="site-header site-header--fixed">
  Header
</header>
<main class="header-fixed">
  Main Content
</main>

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>