Menu
The Menu component is a very flexible component for making menus and navigation elements that will fit in a wide variety of situations. For example, it can be used for a sidebar navigation, or a top of page navigation element (topbar). A wide variety to stacking and alignment options are available.
<Row><Col><Callout><Menu horizontalLeft dividers><Menu.Item text>Left Aligned</Menu.Item><Menu.Item active><a href="#">One</a></Menu.Item><Menu.Item><a href="#">Two</a></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col><Col><Callout><Menu horizontalJustified dividers><Menu.Item text>Justified</Menu.Item><Menu.Item><a href="#">One</a></Menu.Item><Menu.Item active><a href="#">Two</a></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col><Col><Callout><Menu horizontalCentered dividers><Menu.Item text>Centered</Menu.Item><Menu.Item><a href="#">One</a></Menu.Item><Menu.Item><a href="#">Two</a></Menu.Item><Menu.Item active><a href="#">Three</a></Menu.Item></Menu></Callout></Col></Row>
<Row><Col medium={6} xlarge={3}><Callout><Menu verticalLeft dividers><Menu.Item text>Left Aligned</Menu.Item><Menu.Item active><a href="#">One</a></Menu.Item><Menu.Item><a href="#">Two</a></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col><Col medium={6} xlarge={3}><Callout><Menu verticalRight dividers><Menu.Item text>Right Aligned</Menu.Item><Menu.Item><a href="#">One</a></Menu.Item><Menu.Item active><a href="#">Two</a></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col></Row>
<Row><Col medium={6}><Callout><Menu vertical><Menu.Item><a href="#">One</a><Menu nested><Menu.Item><a href="#">Nested One</a></Menu.Item><Menu.Item><a href="#">Nested Two</a></Menu.Item><Menu.Item><a href="#">Nested Three</a></Menu.Item></Menu></Menu.Item><Menu.Item><a href="#">Two</a><Menu nested vertical><Menu.Item><a href="#">Nested One</a></Menu.Item><Menu.Item><a href="#">Nested Two</a></Menu.Item></Menu></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col><Col medium={6}><Callout><Menu vertical dividers><Menu.Item><a href="#">One</a><Menu nested><Menu.Item><a href="#">Nested One</a></Menu.Item><Menu.Item><a href="#">Nested Two</a><Menu nested><Menu.Item><a href="#">Double Nested One</a></Menu.Item><Menu.Item><a href="#">Double Nested Two</a></Menu.Item></Menu></Menu.Item><Menu.Item><a href="#">Nested Three</a></Menu.Item></Menu></Menu.Item><Menu.Item><a href="#">Two</a></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col><Col><Callout><Menu horizontal><Menu.Item><a href="#">One</a><Menu nested><Menu.Item><a href="#">Nested One</a></Menu.Item><Menu.Item><a href="#">Nested Two</a><Menu nested><Menu.Item><a href="#">Double Nested One</a></Menu.Item><Menu.Item><a href="#">Double Nested Two</a></Menu.Item></Menu></Menu.Item><Menu.Item><a href="#">Nested Three</a></Menu.Item></Menu></Menu.Item><Menu.Item><a href="#">Two</a></Menu.Item><Menu.Item><a href="#">Three</a></Menu.Item></Menu></Callout></Col></Row>