flexbox: true
---
-<div class="primary callout">
- <p>This component supports flexbox mode. <a href="#">Learn how to enable flexbox mode</a>.</p>
-</div>
-
## Basics
Add the `.button-group` class to a container, and inside it place any number of buttons. The buttons are separated by a small border.
flex: true
---
-<div class="primary callout">
- <p>This component supports flexbox mode. <a href="#">Learn how to enable flexbox mode</a>.</p>
-</div>
-
The menu is a flexible, all-purpose component for navigation. It replaces Foundation 5's inline list, side nav, sub nav, and icon bar, unifying them into one component.
---
</div>
```
<br>
+
#### Responsive Off-Canvas (Putting it all together)
For an example of off-canvas on small screens and Top Bar Menu with Dropdowns, check out this Building Block: http://zurb.com/building-blocks/top-bar-with-off-canvas
<p>The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on <a href="responsive-navigation.html">responsive navigation</a> to learn more.</p>
</div>
-<div class="primary callout">
- <p>This component supports flexbox mode. <a href="#">Learn how to enable flexbox mode</a>.</p>
-</div>
-
## Basics
A top bar (`.top-bar`) can have two sections: a left-hand section (`.top-bar-left`) and a right-hand section (`.top-bar-right`). On small screens, these sections stack on top of each other.