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:By default, the width of the navigation is constrained to $grid-max-width. To make the navigation full width, replace .p-navigation__row with .p-navigation__row--full-width.

The navigation pattern is one of the first patterns to implement the new theming architecture in Vanilla. The default is light. But, to switch to a dark navigation, you can either:

  • Override the value of the $theme-default-nav in _settings_themes.scss to dark
  • Add a state class to the p-navigation class: is-dark when the default navigation is light, or is-light when the default has been changed to dark

You can also manually override the background color of the navigation using the variable $color-navigation-background. If the lightness of the background is above 70%, the text colour will switch to dark to improve readability.

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

Deprecated

In Vanilla 2.8 we deprecated the use of p-navigation__links, p-navigation__link and classless <a> in the navigation. Support for these classes will be removed in future version 3.0.

You should use p-navigation__items, p-navigation__item and <a class="p-navigation__link"> instead.

To update to new class names:

  • rename all occurrences of p-navigation__links to p-navigation__items
  • rename all occurrences of p-navigation__link to p-navigation__item
  • add p-navigation__link class to all <a> elements that are direct child of p-navigation__item

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

To open the subnav-menu you need to set the is-active class on p-subnav element, but also set aria-hidden to false on p-subnav__items.

By default the sub-navigation menus are left-aligned with their parent, if you'd prefer the menu to be positioned from the right, use the p-subnav__items--right modifier. This can be seen in the "My account" menu in the example.

View example of the sub-navigation pattern

Side navigation

New

The side navigation pattern can be used to provide more detailed navigation alongside your content.

It allows grouping the links into navigation sections and nesting them up to three levels.

Current page in the side navigation should be highlighted by adding is-active class to the corresponding p-side-navigation__link element.

Use p-side-navigation__status inside p-side-navigation__link elements to add status labels or icons on right side of navigation items.

View example of the side navigation pattern

To add icons on the left side of the items in side navigation use the .p-side-navigation--items class.

Note:Icons should only be used on the items in the first level of side navigation.

View example of the side navigation pattern with icons

Import

To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file.

@import 'patterns_navigation';
@include vf-p-navigation;

// sub-navigation is optional you can include it alongside navigation component
@import 'patterns_subnav';
@include vf-p-subnav;

To import side navigation, copy snippet below:

@import 'patterns_side-navigation';
@include vf-p-side-navigation;

// optionally add icons and/or labels if you use them in side navigation__nav
@import 'patterns_label';
@include vf-p-label;

@import 'patterns_icons';
@include vf-p-icons;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

Design

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