Menus

Site

Site menu The site-menu starts as a basic horizontal menu that can be modified to fit a wide array of scenarios. Demo Home About Blog 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.

Learn More »

Mobile

Mobile menu Requires JavaScript Our version of the standard hamburger menu requires our Javascript and a bit more markdown. Here’s the basic structure; check out this site in a mobile viewport to see it in action.

Learn More »

Icon

Icon menu Sometimes you need a smaller menu for a specific area or a smaller viewport. Try an icon menu! Demo Markup <div class="icon-menu"> <div class="icon-menu__item"> <a href="" class="icon-menu__action"> <i class="pi-edit"></i> </a> </div> <div class="icon-menu__item"> <a href="" class="icon-menu__action"> <i class="pi-clock"></i> </a> </div> <div class="icon-menu__item"> <a href="" class="icon-menu__action"> <i class="pi-trash"></i> </a> </div> </div> Modifiers Modifier † Behavior icon-menu--vertical Shift the menu’s orientation to vertical.

Learn More »