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