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
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
- Add a state class to the
is-darkwhen the default navigation is light, or
is-lightwhen 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
Sub-navigation drop-down menus can be added to the navigation by including one
To open the subnav-menu you need to set the
is-active class on
p-subnav element, but also set
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.
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;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
For more information view the navigation and sub-navigation design spec, which includes the specification in markdown format and a PNG image.