diff --git a/releases.yml b/releases.yml index 8f2b7c2ada..5557b864b5 100644 --- a/releases.yml +++ b/releases.yml @@ -1,6 +1,6 @@ - version: 4.7.0 features: - - component: Navigation\ + - component: Navigation / 25/75 split url: /docs/patterns/navigation status: Updated notes: We've introduced a new variant of top navigation that aligns with 25/75 grid split using p-navigation__row--25-75. diff --git a/templates/docs/patterns/navigation/index.md b/templates/docs/patterns/navigation/index.md index e36db5dc38..78bca10051 100644 --- a/templates/docs/patterns/navigation/index.md +++ b/templates/docs/patterns/navigation/index.md @@ -12,18 +12,6 @@ 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 change the breakpoint at which the menu changes to a small screen menu by adjusting the `$breakpoint-navigation-threshold` variable from `_settings_breakpoints.scss`. @@ -31,6 +19,13 @@ by adjusting the `$breakpoint-navigation-threshold` variable from `_settings_bre View example of the navigation pattern +
+

+ New in Vanilla 4.7.0: + Starting with Vanilla 4.7.0 we recommend using new p-navigation__row--25-75 in place of p-navigation__row on brochure websites to better align with the grid. +

+
+ ## Dropdown Drop-down menus can be added to the navigation by including one or more `p-navigation__item--dropdown-toggle` components.