Site
Site menu
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—bordered | Add 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>logo
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.
dropdowns
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>