Yale's UI Style Guide uses Foundation's builded patterns. Foundations is bundled with many simple navigation patterns, which can be combined to form more complex, robust responsive navigation solutions.
The Menu is an all-purpose navigation component. It can be aligned horizontally or vertically, can be nested, and supports icons. Learn more about the Menu.
All menus use the ul > li > a pattern. The markup is a little strict, but this makes it easy to attach a navigation plugin to any menu, as you'll see below.
Here's a basic Menu.
<nav role="navigation" aria-labelledby="main-menu-heading">
<h2 id="main-menu-heading" class="show-for-sr">Main Menu</h2>
<ul class="menu">
<li class="active"><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</nav>
To nest menus, add a new <ul> inside of an <li>, after the <a> inside.
<nav role="navigation" aria-labelledby="main-menu-heading">
<h2 id="main-menu-heading" class="show-for-sr">Main Menu</h2>
<ul class="menu">
<li>
<a href="#">Item One</a>
<ul class="menu">
<li><a href="#">Item One-one</a></li>
</ul>
</li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</nav>
Top bar is a simple wrapper around these menu patterns. It supports a left-hand and right-hand section, which collapse on top of each other on small screens. Learn more about the top bar.
The basic Menu can be enhanced with one of three Menu plugins. All three use the exact same markup to create a different style of multi-tier navigation.
The dropdown menu plugin (data-dropdown-menu) converts a nested menu into a series of dropdown menus. The nested menus can be opened through hover, click, or keyboard. Learn more about the dropdown menu.
The drilldown menu plugin (data-drilldown) converts a nested menu into a series of sliding menus. Clicking an item slides the next level menu into view. Learn more about the drilldown menu.
The accordion menu plugin (data-accordion-menu) converts a nested menu into a series of collapsed accordions. Clicking an item slides down the nested menu. Learn more about the accordion menu.
Each of the above three patterns has a use in a specific context. But some patterns only work at certain screen sizes. For example, dropdown menus don't work as well on smaller screens, but the same navigation items might work better as a drilldown or an accordion menu at that screen size.
Our responsive menu plugin (data-responsive-menu) allows you to take a Menu, and assign different navigation patterns to it at different screen sizes. In the below example, a drilldown menu changes to a dropdown menu at larger screen sizes. Learn more about the responsive Menu plugin.
In other situations, you may wish to always display a menu on a larger screen, but hide that same menu behind a click toggle on smaller screens. You can do this with the responsive toggle plugin (data-responsive-toggle). This plugin works with any container, not just a menu. Learn more about the responsive toggle plugin.
To see the below example in action, scale your browser down. The top bar will be replaced by a smaller title bar. Clicking the icon inside the title bar reveals the top bar.
See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.
Menus should be wrapped in a nav element to make it easier for screen readers to quickly move to the menu. nav elements also benefit from having an ARIA label associated with them. One way of providing an ARIA label is to use an aria-label attribute.
Menus also benefit from approprite headings being included within the containing nav element. The heading can be visually hidden using the show-for-sr class, so that it is only visible to screen readers. Headings can be used as ARIA labels for nav elements by giving the heading an id attribute and giving the nav an aria-labelledby attribute whose value equals the value of the heading's id attribute.
<nav role="navigation" aria-labelledby="main-menu-heading">
<h2 id="main-menu-heading" class="show-for-sr">Main Menu</h2>
<ul class="menu">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</nav>