@ithaka/bonsai/documentation/pages/components/menu.md

ITHAKA core styling

---
title: Menu
description: The menu component is a flexible, all-purpose component for navigation.  This component can be used as a stand alone menu or in combination with other components.
foundation: http://foundation.zurb.com/sites/docs/menu.html
sass: ./scss/_menu.scss
---

## How to Use

The menu component can be used in a variety of ways because of its simplicity and flexibility.  This component at its core is a list of links used for navigation.  The `menu` class can be added to a `ul` to add the basic foundation styling.
An example of a list of links is the current JSTOR footer. (See "Vertical Menu" below). 

More commonly, the `menu` component is used in combination with other components to add more complex styling and functionality. An example of this is the combination of `dropdown` and `menu` to create a sidenav component.	

### Basic Horizontal Menu

Add class `horizontal` to the `ul` to horizontally align the menu.

```html_example
<ul class="menu">
    <li><a href="#">Item 1A</a></li>
    <li><a href="#">Item 2A</a></li>
    <li><a href="#">Item 3A</a></li>
    <li><a href="#">Item 4A</a></li>
</ul>
```
<br />
### Vertical Menu

Add class `vertical` to the `ul` to vertically align the menu.

```html_example
<ul class="menu vertical">
    <li><a href="#">Item 1A</a></li>
    <li><a href="#">Item 2A</a></li>
    <li><a href="#">Item 3A</a></li>
    <li><a href="#">Item 4A</a></li>
</ul>
```
<br />
### Active Menu

```html_example
<ul class="menu">
    <li class="is-active"><a href="#">Item 1A</a></li>
    <li><a href="#">Item 2A</a></li>
    <li><a href="#">Item 3A</a></li>
    <li><a href="#">Item 4A</a></li>
</ul>
```
<br />
## Accessibility and Guidelines
1. Review the <a href="dropdown-menu.html">dropdown-menu</a> component when combining the menu component.
1. Review the <a href="links.html">links</a> component when using the menu component alone to present a list of navigational options.