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
The background color of a navigation pattern can be set via the
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.