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 nav full width, replace
The background color of a navigation pattern can be set via the
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.
For more information view the navigation and sub-navigation design spec, which includes the specification in markdown format and a PNG image.