Vanilla includes a simple navigation bar that you can add to the top of your sites.
The navigation items are collapsed behind a "Menu" link in small screens and displayed horizontally on larger screens.
Note: You can constrain the width of the navigation to match the
$grid-max-width by placing everything inside the header element within a
Note: To make the navigation full width you should just remove the
from the mark up presented below.
Tip: You can change the breakpoint at which the menu changes to a small screen
menu by adjusting the
Vanilla also allows you to use a sidebar navigation, with menu items collapsing under section titles in an accordion. This example code will expand to fill the space available to it so it needs to be used in conjunction with the grid to set the layout. This pattern includes a tagline which sits next to the logo.