@ons/design-system 48.0.3 → 49.1.0

package/components/button/_button.scss

@@ -379,7 +379,7 @@ $button-shadow-size: 3px;
       transform: rotate(90deg);
     }
 
-    @include mq(m) {
+    @include mq(l) {
       display: none;
     }
   }
@@ -393,4 +393,41 @@ $button-shadow-size: 3px;
       opacity: 0.4;
     }
   }
+
+  &--dropdown {
+    @extend .ons-btn--ghost;
+    @extend .ons-btn--mobile;
+
+    width: 100%;
+
+    .ons-btn__inner {
+      background: $color-branded-tint;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      color: $color-text-link;
+      display: block;
+      font-size: 1rem;
+      font-weight: normal;
+      padding: 0.6rem 1rem;
+      text-align: left;
+
+      .ons-svg-icon {
+        fill: $color-text-link;
+        float: right;
+        margin-top: 3px;
+      }
+    }
+
+    &:active,
+    &:active:focus {
+      .ons-btn__inner {
+        background: $color-branded-secondary;
+        color: $color-white;
+        .ons-svg-icon {
+          fill: $color-white;
+        }
+      }
+    }
+  }
 }

package/components/checkboxes/_checkbox-macro.njk

@@ -7,6 +7,7 @@
             id="{{ params.id }}"
             class="ons-checkbox__input ons-js-checkbox {{ params.inputClasses }}"
             value="{{ params.value }}"
+            {% if params.disabled is defined and params.disabled == true %}disabled aria-disabled="true"{%endif %}
             {% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}
             {% if params.checked is defined and params.checked %} checked{% endif %}
             {% if params.other is defined and params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %}

package/components/checkboxes/_checkbox.scss

@@ -30,6 +30,16 @@ $checkbox-padding: 11px;
     &:checked {
       background-size: 14px;
     }
+
+    &:disabled {
+      border: 2px solid $color-border-disabled;
+      cursor: not-allowed;
+    }
+
+    &:disabled + label {
+      color: $color-grey-35;
+      cursor: not-allowed;
+    }
   }
 
   &--no-border {

package/components/checkboxes/_macro.njk

@@ -56,6 +56,7 @@
                         "name": checkbox.name,
                         "value": checkbox.value,
                         "checked": childIsChecked if childIsChecked == true else checkbox.checked,
+                        "disabled": checkbox.disabled,
                         "borderless": params.borderless,
                         "classes": checkbox.classes | default('') + borderless | default(''),
                         "inputClasses": exclusiveClass | default('') + otherClass | default(''),

package/components/header/_header.scss

@@ -170,20 +170,41 @@
     display: block;
   }
 
-  &__bottom {
-    background: $color-header;
-    margin-top: -0.03rem;
-  }
+  &-service-nav {
+    display: inline-block;
 
-  &-search {
-    padding: 1rem;
+    &--mobile {
+      background: $color-branded-tint;
+      padding: 1rem;
+      width: 100%;
+    }
 
-    @include mq(m) {
-      bottom: 65px;
+    &__list {
+      list-style: none;
+      margin: 0;
       padding: 0;
-      position: absolute;
-      right: 1rem;
-      width: 20rem;
+    }
+
+    &__item {
+      display: inline-block;
+      margin: 0 0 0 1rem;
+      &--mobile {
+        display: block;
+        margin: 0 0 0.5rem;
+      }
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .ons-language-links {
+      border-top: 1px solid $color-branded;
+      margin: 1.5rem 0 0;
+      padding: 1rem 0 0;
+
+      &__item {
+        margin: 0 0 0.5rem;
+      }
     }
   }
 }

package/components/header/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsHeader(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icons/_macro.njk" import onsIcon %}
-    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
+    {% from "components/navigation/_macro.njk" import onsNavigation %}
 
     {% set title_tag = "h1" if params.tilteAsH1 else "div" %}
     {% set currentLanguageISOCode = "en" %}
@@ -145,7 +145,7 @@
                         {% endif %}
                     </div>
                     {% if params.button is defined and params.button %}
-                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
+                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
                             {{ onsButton({
                                 "text": params.button.text,
                                 "classes": "ons-u-d-no@xxs@m",
@@ -158,9 +158,9 @@
                             }) }}
                         </div>
                     {% endif %}
-                    {% if params.navigation is defined and params.navigation and params.navigation.toggleButton is defined and params.navigation.toggleButton or params.autosuggest is defined and params.autosuggest %}
-                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
-                            {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
+                    {% if params.navigation is defined %}
+                        <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
+                            {% if isPatternLib and params.navigation.siteSearchAutosuggest %}
                                 <span class="ons-grid ons-u-d-no@xxs@xs">
                                     {{ onsButton({
                                         "text": "Search",
@@ -169,22 +169,22 @@
                                         "iconType": "search",
                                         "iconPosition": "only",
                                         "attributes": {
-                                            "aria-label": params.searchToggle.ariaLabel | default("Toggle search"),
-                                            "aria-controls": params.navigation.id,
+                                            "aria-label": "Toggle search" ,
+                                            "aria-controls": "ons-site-search",
                                             "aria-haspopup": "true",
                                             "aria-expanded": "false"
                                         }
                                     }) }}
                                 </span>
                             {% endif %}
-                            {% if params.navigation.toggleButton is defined and params.navigation.toggleButton %}
+                            {% if params.navigation.toggleNavigationButton is defined and params.navigation.toggleNavigationButton %}
                                 {{ onsButton({
-                                    "text": params.navigation.toggleButton.text | default("Menu"),
-                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
+                                    "text": params.navigation.toggleNavigationButton.text,
+                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button",
                                     "buttonStyle": "mobile",
                                     "variants": ["mobile", "ghost"],
                                     "attributes": {
-                                        "aria-label": params.navigation.toggleButton.ariaLabel | default("Toggle menu"),
+                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                         "aria-controls": params.navigation.id,
                                         "aria-haspopup": "true",
                                         "aria-expanded": "false"
@@ -197,47 +197,7 @@
             </div>
         </div>
         {% if params.navigation is defined and params.navigation %}
-            <div class="ons-header__bottom">
-                <div class="ons-container ons-container--gutterless@xxs@m{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-                    {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
-                        <div class="ons-header-search ons-js-header-search">
-                            {{ onsAutosuggest({
-                                "id": "ons-autosuggest-header-search",
-                                "containerClasses": "ons-autosuggest-input--header",
-                                "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
-                                "label": {
-                                    "text": params.autosuggest.label,
-                                    "id": "ons-autosuggest-header-search-label",
-                                    "classes": "ons-label--white ons-u-pl-m"
-                                },
-                                "accessiblePlaceholder": true,
-                                "autocomplete": "off",
-                                "instructions": params.autosuggest.instructions,
-                                "ariaYouHaveSelected":params.autosuggest.ariaYouHaveSelected,
-                                "ariaMinChars": params.autosuggest.ariaMinChars,
-                                "ariaResultsLabel": params.autosuggest.ariaResultsLabel,
-                                "ariaOneResult": params.autosuggest.ariaOneResult,
-                                "ariaNResults": params.autosuggest.ariaNResults,
-                                "ariaLimitedResults": params.autosuggest.ariaLimitedResults,
-                                "moreResults": params.autosuggest.moreResults,
-                                "resultsTitle": params.autosuggest.resultsTitle,
-                                "autosuggestData": params.autosuggest.autosuggestData,
-                                "noResults": params.autosuggest.noResults,
-                                "typeMore": params.autosuggest.typeMore
-                            }) }}
-                        </div>
-                    {% endif %}
-                    <nav class="ons-header-nav ons-js-header-nav" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
-                        <ul class="ons-header-nav__list">
-                            {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
-                                <li class="ons-header-nav__item {{ item.classes }}{{ ' ons-header-nav__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
-                                    <a class="ons-header-nav__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </nav>
-                </div>
-            </div>
+            {{ onsNavigation(params.navigation) }}
         {% endif %}
     </header>
 {% endmacro %}

package/components/navigation/_macro.njk

@@ -0,0 +1,98 @@
+{% macro onsNavigation(params) %}
+    {% from "components/button/_macro.njk" import onsButton %}
+    {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
+    <div class="ons-navigation-wrapper">
+        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+            {% if params.siteSearchAutosuggest is defined and params.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
+                <div class="ons-navigation-search ons-js-navigation-search">
+                    {{ onsAutosuggest({
+                        "id": "ons-site-search",
+                        "containerClasses": "ons-autosuggest-input--header",
+                        "classes": "ons-input--ghost ons-input-search ons-input-search--icon",
+                        "label": {
+                            "text": params.siteSearchAutosuggest.label,
+                            "id": "ons-site-search-label",
+                            "classes": "ons-label--white ons-u-pl-m"
+                        },
+                        "accessiblePlaceholder": true,
+                        "autocomplete": "off",
+                        "instructions": params.siteSearchAutosuggest.instructions,
+                        "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
+                        "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
+                        "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
+                        "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
+                        "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
+                        "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,
+                        "moreResults": params.siteSearchAutosuggest.moreResults,
+                        "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
+                        "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
+                        "noResults": params.siteSearchAutosuggest.noResults,
+                        "typeMore": params.siteSearchAutosuggest.typeMore
+                    }) }}
+                </div>
+            {% endif %}
+            <nav class="ons-navigation ons-js-navigation" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
+                <ul class="ons-navigation__list">
+                    {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.currentPath) or (item.url != (params.siteBasePath | default('/')) and item.url in params.currentPath) }}">
+                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
+    </div>
+    {% if params.subNavigation is defined and params.subNavigation %}
+        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.subNavigation.classes if params.subNavigation.classes is defined and params.subNavigation.classes }}" id="{{ params.subNavigation.id }}" aria-label="{{ params.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+                <ul class="ons-navigation__list ons-navigation__list">
+                    {% for item in (params.subNavigation.itemsList if params.subNavigation.itemsList is iterable else params.subNavigation.itemsList.items()) %}
+                        <li class="ons-navigation__item ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </nav>
+        <div class="ons-u-d-no@l{{ ' ' + params.subNavigation.classes if params.subNavigation.classes is defined and params.subNavigation.classes }}">
+            {{ onsButton({
+                "text": params.currentPageTitle,
+                "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
+                "buttonStyle": "mobile",
+                "attributes": {
+                    "aria-label": "Toggle section navigation",
+                    "aria-controls": params.subNavigation.id,
+                    "aria-haspopup": "true",
+                    "aria-expanded": "false"
+                }
+            }) }}
+            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no proto-ons-js-secondary-nav ons-u-mt-xs" id="{{ params.subNavigation.id }}" aria-label="{{ params.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
+                    <ul class="ons-navigation__list">
+                        <li class="ons-navigation__item">
+                            <a class="ons-navigation__link" href="{{ params.subNavigation.overviewURL }}">{{ params.subNavigation.overviewText | default('Overview') }}</a>
+                        </li>
+                        {% for item in (params.subNavigation.itemsList if params.subNavigation.itemsList is iterable else params.subNavigation.itemsList.items()) %}
+                            <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.subNavigation.currentPath) or (item.url != (params.subNavigation.siteBasePath | default('/')) and item.url in params.subNavigation.currentPath) }}">
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                                {% if item.sections %}
+                                    {% for section in item.sections %}
+                                        {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
+                                        <ul class="ons-navigation__list ons-list--dashed ons-u-ml-s ons-u-mt-xs">
+                                            {% for child in section.children %}
+                                                <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.subNavigation.currentPath) or (child.url != (params.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.subNavigation.currentPath) }}">
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    {% endfor %}
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </nav>
+        </div>
+    {% endif %}
+
+{% endmacro %}

package/components/navigation/_navigation.scss

@@ -0,0 +1,127 @@
+.ons-navigation {
+  position: relative;
+  &-wrapper {
+    background: $color-header;
+    margin-top: -0.03rem;
+  }
+
+  &--sub {
+    background: $color-branded-tint;
+    padding-top: 0.5rem;
+  }
+
+  &--sub-mobile {
+    border-bottom: 4px solid $color-branded-tint;
+  }
+
+  &-search {
+    padding: 1rem;
+
+    @include mq(l) {
+      bottom: 65px;
+      padding: 0;
+      position: absolute;
+      right: 1rem;
+      width: 20rem;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 0.5rem;
+
+    @include mq(l) {
+      padding: 0;
+    }
+
+    &-header {
+      font-size: 1rem;
+      margin: 0.75rem 0 0.6rem;
+      padding: 0 0 0 1rem;
+    }
+  }
+
+  &__item {
+    border-left: 4px solid transparent;
+    display: block;
+    margin: 0 0 0.2rem;
+    &--active {
+      border-color: $color-white;
+    }
+
+    .ons-navigation--sub-mobile & {
+      &--active {
+        border-color: $color-branded;
+        li {
+          border: 0;
+        }
+      }
+    }
+
+    @include mq(l) {
+      border-bottom: 4px solid transparent;
+      border-left: 0;
+      display: inline-block;
+      margin: 0 0 0 1rem;
+      padding: 0 0 0.3rem;
+      position: relative;
+      text-align: center;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &--active,
+      &:hover {
+        border-color: $color-white;
+      }
+
+      .ons-navigation--sub & {
+        &:hover,
+        &--active {
+          border-color: $color-text-link;
+        }
+      }
+    }
+  }
+
+  &__link {
+    color: $color-white;
+    display: block;
+    margin: 0 0.35rem;
+    padding: 0.1rem 0.55rem;
+    text-decoration: none;
+
+    &--section {
+      margin: 0;
+      padding: 0;
+    }
+
+    &:hover,
+    &:focus {
+      color: $color-white;
+      text-decoration: none;
+    }
+
+    .ons-navigation--sub &,
+    .ons-navigation--sub-mobile & {
+      color: $color-text-link;
+      &:hover,
+      &:focus {
+        color: $color-text-link;
+      }
+    }
+
+    @include mq(l) {
+      display: inline-block;
+      font-size: 1rem;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__item--active > &__link {
+    font-weight: 700;
+  }
+}

package/components/navigation/navigation.dom.js

@@ -0,0 +1,39 @@
+import domready from '../../js/domready';
+
+domready(async () => {
+  const toggleNavigationBtn = document.querySelector('.ons-js-navigation-button');
+  const navigationEl = document.querySelector('.ons-js-navigation');
+  const navigationHideClass = 'ons-u-d-no@xxs@l';
+  const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
+  const subNavigationEl = document.querySelector('.proto-ons-js-secondary-nav');
+  const subNavigationHideClass = 'ons-u-d-no';
+  const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
+  const searchEl = document.querySelector('.ons-js-navigation-search');
+  const searchHideClass = 'ons-u-d-no@xs@l';
+  const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
+  const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
+  const servicesHideClass = 'ons-u-d-no';
+
+  if (toggleNavigationBtn) {
+    const NavigationToggle = (await import('./navigation')).default;
+
+    new NavigationToggle(toggleNavigationBtn, navigationEl, navigationHideClass).registerEvents();
+  }
+
+  if (toggleSubNavigationBtn) {
+    const SubNavigationToggle = (await import('./navigation')).default;
+    new SubNavigationToggle(toggleSubNavigationBtn, subNavigationEl, subNavigationHideClass).registerEvents();
+  }
+
+  if (toggleSearchBtn) {
+    const searchToggle = (await import('./navigation')).default;
+
+    new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
+  }
+
+  if (toggleServicesBtn) {
+    const servicesToggle = (await import('./navigation')).default;
+
+    new servicesToggle(toggleServicesBtn, servicesEl, servicesHideClass).registerEvents();
+  }
+});

package/components/{header/header-nav.js → navigation/navigation.js}

@@ -5,10 +5,10 @@ import onViewportChange from '../../js/utils/viewport-change';
 const attrExpanded = 'aria-expanded';
 const attrHidden = 'aria-hidden';
 
-export default class NavToggle {
-  constructor(toggle, nav, hideClass) {
+export default class NavigationToggle {
+  constructor(toggle, navigation, hideClass) {
     this.toggle = toggle;
-    this.nav = nav;
+    this.navigation = navigation;
     this.hideClass = hideClass;
     this.toggle.classList.remove('ons-u-d-no');
     this.setAria();
@@ -20,17 +20,17 @@ export default class NavToggle {
   }
 
   toggleNav() {
-    const isHidden = this.nav.getAttribute(attrHidden);
+    const isHidden = this.navigation.getAttribute(attrHidden);
     isHidden === 'false' ? this.closeNav() : this.openNav();
   }
 
   openNav() {
-    const input = [...this.nav.getElementsByTagName('INPUT')][0];
+    const input = [...this.navigation.getElementsByTagName('INPUT')][0];
 
     this.toggle.setAttribute(attrExpanded, 'true');
     this.toggle.classList.add('active');
-    this.nav.setAttribute(attrHidden, 'false');
-    this.nav.classList.remove(this.hideClass);
+    this.navigation.setAttribute(attrHidden, 'false');
+    this.navigation.classList.remove(this.hideClass);
 
     if (input) {
       input.focus();
@@ -40,23 +40,23 @@ export default class NavToggle {
   closeNav() {
     this.toggle.setAttribute(attrExpanded, 'false');
     this.toggle.classList.remove('active');
-    this.nav.setAttribute(attrHidden, 'true');
-    this.nav.classList.add(this.hideClass);
+    this.navigation.setAttribute(attrHidden, 'true');
+    this.navigation.classList.add(this.hideClass);
   }
 
   setAria() {
     const viewportDetails = GetViewportDetails();
-    const hasAria = this.nav.hasAttribute(attrHidden);
+    const hasAria = this.navigation.hasAttribute(attrHidden);
 
-    if (viewportDetails.width < 740) {
+    if (viewportDetails.width < 980) {
       if (!hasAria) {
         this.closeNav();
       }
     } else if (hasAria) {
       this.toggle.removeAttribute(attrExpanded);
-      this.nav.removeAttribute(attrHidden);
+      this.navigation.removeAttribute(attrHidden);
       if (this.hideClass !== 'ons-u-d-no') {
-        this.nav.classList.remove(this.hideClass);
+        this.navigation.classList.remove(this.hideClass);
       } else {
         this.closeNav();
       }

package/components/section-navigation/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSectionNavigation(params) %}
   <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
-      <ul class="ons-section-nav__list" aria-label="{{ params.ariaListLabel | default("Section menu links") }}">
+      <ul class="ons-section-nav__list">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
           <li class="ons-section-nav__item {{ item.classes }}{{ ' ons-section-nav__item--active' if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) }}">
             <a class="ons-section-nav__link" href="{{ item.url }}" {% if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) %} aria-current="location" {% endif %}>{{ item.title }}</a>