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 .row wrapper.

The background color of a navigation pattern can be set via the $color-navigation-background variable.

You can change the breakpoint at which the menu changes to a small screen menu by adjusting the $breakpoint-navigation-threshold in _settings_breakpoints.scss.

View example of the navigation pattern

Sub-navigation drop-down menus can be added to the navigation by including one or more p-subnav components.

Note: This component's functionality requires JavaScript. The sub-navigation example provides an example implementation.

View example of the sub-navigation pattern

Design

For more information view the navigation and sub-navigation design spec, which includes the specification in markdown format and a PNG image.