@ons/design-system 66.0.2 → 67.0.1

package/components/header/_macro.njk

@@ -12,7 +12,7 @@
         {% set currentLanguageISOCode = currentLanguage.ISOCode %}
     {% endif %}
 
-    <header class="ons-header {% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
+    <header class="ons-header{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
         {{
             onsBrowserBanner({
                 "lang": currentLanguageISOCode,
@@ -141,22 +141,22 @@
                     <ul class="ons-header-service-nav__list">
                         {% for item in params.serviceLinks.itemsList %}
                             <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
-                            {% if item.iconType %}
-                                {{
-                                    onsIcon({
-                                        "iconType": item.iconType
-                                    })
-                                }}
-                            {% endif %}
-                            {% if item.url %}
-                                <a
-                                    href="{{ item.url }}"
-                                    class="ons-header-service-nav__link"
-                                    {% if item.id %} id="{{ item.id }}"{% endif %}
-                                >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
-                            {% else %}
-                                {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
-                            {% endif %}
+                                {% if item.iconType %}
+                                    {{
+                                        onsIcon({
+                                            "iconType": item.iconType
+                                        })
+                                    }}
+                                {% endif %}
+                                {% if item.url %}
+                                    <a
+                                        href="{{ item.url }}"
+                                        class="ons-header-service-nav__link"
+                                        {% if item.id %} id="{{ item.id }}"{% endif %}
+                                    >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
+                                {% else %}
+                                    {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
+                                {% endif %}
                             </li>
                         {% endfor %}
                     </ul>

package/components/header/_macro.spec.js

@@ -161,6 +161,45 @@ const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = {
   },
 };
 
+const EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#home',
+    itemsList: [
+      {
+        title: 'Home',
+        url: '#home',
+      },
+      {
+        title: 'Guidance',
+        url: '#0',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main menu',
+    },
+  },
+  siteSearchAutosuggest: {
+    label: 'label',
+    instructions: 'Use up and down keys to navigate.',
+    ariaYouHaveSelected: 'You have selected',
+    ariaMinChars: 'Enter 3 or more characters for suggestions.',
+    minChars: 3,
+    ariaResultsLabel: 'Country suggestions',
+    ariaOneResult: 'There is one suggestion available.',
+    ariaNResults: 'There are {n} suggestions available.',
+    ariaLimitedResults: 'Type more characters to improve your search',
+    moreResults: 'Continue entering to improve suggestions',
+    resultsTitle: 'Suggestions',
+    resultsTitleId: 'country-of-birth-suggestions',
+    noResults: 'No suggestions found.',
+    typeMore: 'Continue entering to get suggestions',
+    language: 'en-gb',
+  },
+};
+
 describe('macro: header', () => {
   describe('mode: basic', () => {
     it('passes jest-axe checks', async () => {
@@ -453,21 +492,21 @@ describe('macro: header', () => {
     it('has the text for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LIST_ITEMS));
 
-      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), node => node.text().trim());
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__item'), (node) => node.text().trim());
       expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link text for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), node => node.text().trim());
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.text().trim());
       expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link href for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), node => node.attr('href'));
+      const values = mapAll($('.ons-header-service-nav--main .ons-header-service-nav__link'), (node) => node.attr('href'));
       expect(values).toEqual(['#1', '#2', '#3']);
     });
 
@@ -486,14 +525,14 @@ describe('macro: header', () => {
     it('has the link text for each list item for mobile', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), node => node.text().trim());
+      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.text().trim());
       expect(values).toEqual(['Title 1', 'Title 2', 'Title 3']);
     });
 
     it('has the link href for each list item for mobile', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
-      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), node => node.attr('href'));
+      const values = mapAll($('.ons-header-service-nav--mobile .ons-header-service-nav__link'), (node) => node.attr('href'));
       expect(values).toEqual(['#1', '#2', '#3']);
     });
 
@@ -742,3 +781,87 @@ describe('macro: header', () => {
     });
   });
 });
+
+describe('mode: with site search autosuggest', () => {
+  it('renders the search with expected parameters', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('autosuggest');
+
+    faker.renderComponent('header', EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST);
+
+    expect(buttonSpy.occurrences[0]).toEqual({
+      ariaLimitedResults: 'Type more characters to improve your search',
+      minChars: 3,
+      language: 'en-gb',
+      ariaMinChars: 'Enter 3 or more characters for suggestions.',
+      ariaNResults: 'There are {n} suggestions available.',
+      ariaOneResult: 'There is one suggestion available.',
+      ariaResultsLabel: 'Country suggestions',
+      ariaYouHaveSelected: 'You have selected',
+      containerClasses: 'ons-autosuggest--header',
+      id: 'ons-site-search',
+      input: {
+        accessiblePlaceholder: true,
+        autocomplete: 'off',
+        classes: 'ons-input-search ons-input-search--icon',
+        label: {
+          classes: 'ons-u-pl-m ons-label--white',
+          id: 'ons-site-search-label',
+          text: 'label',
+        },
+      },
+      instructions: 'Use up and down keys to navigate.',
+      moreResults: 'Continue entering to improve suggestions',
+      noResults: 'No suggestions found.',
+      resultsTitle: 'Suggestions',
+      typeMore: 'Continue entering to get suggestions',
+    });
+  });
+
+  describe('when the user inputs text', () => {
+    let $; // Initialize a Cheerio instance
+
+    const mockData = [
+      { en: 'England' },
+      { en: 'Wales' },
+      { en: 'Scotland' },
+      { en: 'United States of America' },
+      { en: 'United States Virgin Islands' },
+      { en: 'Åland Islands' },
+    ];
+
+    beforeEach(() => {
+      $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
+          autosuggestData: mockData,
+        }),
+      );
+    });
+
+    it('does not show suggestions when input length < minimum characters', () => {
+      $('.ons-js-autosuggest-input').val('En');
+
+      setTimeout(() => {
+        const suggestionCount = $('.ons-autosuggest__option').length;
+        expect(suggestionCount).toBe(0);
+      }, 20);
+    });
+
+    it('shows suggestions when input length >= minimum characters', () => {
+      $('.ons-js-autosuggest-input').val('Eng');
+
+      setTimeout(() => {
+        const suggestionCount = $('.ons-autosuggest__option').length;
+        expect(suggestionCount).toBe(1);
+      }, 20);
+    });
+
+    it('gets the language if set', () => {
+      $('.ons-js-autosuggest-input').val('Eng');
+
+      const autosuggestElement = $('.ons-js-autosuggest').attr('data-lang');
+      expect(autosuggestElement).toBe('en-gb');
+    });
+  });
+});

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -0,0 +1,57 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'Design system',
+        "titleUrl": '#0',
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": '#home',
+            "itemsList": [
+                {
+                    "text": 'Home',
+                    "url": '#home'
+                },
+                {
+                    "text": 'Guidance',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Foundations',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Components',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Patterns',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle main menu'
+            }
+        },
+           'siteSearchAutosuggest': {
+            "autosuggestData":  "/examples/data/country-of-birth.json",
+            "label": "search",
+            "instructions": "instructions",
+            "ariaYouHaveSelected": "ariaYouHaveSelected",
+            "ariaMinChars": "ariaMinChars",
+            "ariaResultsLabel": "ariaResultsLabel",
+            "ariaOneResult": "ariaOneResult",
+            "ariaNResults": "ariaNResults",
+            "ariaLimitedResults": "ariaLimitedResults",
+            "moreResults": "moreResults",
+            "resultsTitle": "resultsTitle",
+            "noResults": "noResults",
+            "typeMore": "typeMore"
+        }
+    })
+}}

package/components/input/_input-type.scss

@@ -14,12 +14,12 @@
     z-index: 1;
 
     &:focus {
-      // Overide default input focus so it can wrap prefix/suffix too
+      // Override default input focus so it can wrap prefix/suffix too
       box-shadow: none;
       outline: none;
     }
 
-    // Overide default input error style so it can wrap prefix/suffix too
+    // Override default input error style so it can wrap prefix/suffix too
     &.ons-input--error:not(:focus) {
       border-right: $input-border-width solid var(--ons-color-input-border);
       box-shadow: none;

package/components/input/_macro.njk

@@ -76,7 +76,7 @@
                     {% set prefixClass = " ons-input-type--prefix" %}
                 {% endif %}
 
-                <span class="ons-input-type{{ prefixClass }}">
+                <span class="ons-input-type{{ prefixClass }}{% if params.prefix or params.suffix %} ons-js-input-container-abbr{% endif %}">
                     <span class="ons-input-type__inner">
                         {{ input | safe }}
 

package/components/input/_macro.spec.js

@@ -245,7 +245,7 @@ describe('macro: input', () => {
     expect($('.ons-input').attr('autocomplete')).toBe('on');
   });
 
-  it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', type => {
+  it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', (type) => {
     const $ = cheerio.load(
       renderComponent('input', {
         ...EXAMPLE_INPUT_MINIMAL,
@@ -421,11 +421,7 @@ describe('macro: input', () => {
 
       expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('id')).toBe('example-prefix-id');
       expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('title')).toBe('Example prefix title');
-      expect(
-        $('.ons-input-type--prefix .ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example prefix text');
+      expect($('.ons-input-type--prefix .ons-js-input-abbr').text().trim()).toBe('Example prefix text');
     });
 
     it('does not render prefix element when `prefix.id` not set', () => {
@@ -483,11 +479,7 @@ describe('macro: input', () => {
 
       expect($('.ons-js-input-abbr').attr('id')).toBe('example-suffix-id');
       expect($('.ons-js-input-abbr').attr('title')).toBe('Example suffix title');
-      expect(
-        $('.ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example suffix text');
+      expect($('.ons-js-input-abbr').text().trim()).toBe('Example suffix text');
     });
 
     it('does not render suffix element when `suffix.id` not set', () => {
@@ -653,11 +645,7 @@ describe('macro: input', () => {
       );
 
       expect($('a.ons-input__post-link').attr('href')).toBe('https://example.com/link');
-      expect(
-        $('a.ons-input__post-link')
-          .text()
-          .trim(),
-      ).toBe('Example link');
+      expect($('a.ons-input__post-link').text().trim()).toBe('Example link');
     });
   });
 

package/components/input/input.dom.js

@@ -0,0 +1,11 @@
+import domready from '../../js/domready';
+
+domready(async () => {
+  const abbrInputs = [...document.querySelectorAll('.ons-js-input-container-abbr')];
+
+  if (abbrInputs.length) {
+    const abbrInput = (await import('./input')).default;
+
+    abbrInputs.forEach((element) => new abbrInput(element));
+  }
+});

package/components/input/input.js

@@ -0,0 +1,14 @@
+export default class AbbrInput {
+  constructor(context) {
+    this.abbrInput = context;
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    this.abbrInput.querySelector('.ons-js-input-abbr').addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick() {
+    this.abbrInput.querySelector('.ons-input').focus();
+  }
+}

package/components/input/input.spec.js

@@ -0,0 +1,28 @@
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_INPUT_MINIMAL = {
+  id: 'example-id',
+  name: 'example-name',
+};
+
+describe('script: input', () => {
+  it('focuses input when abbreviation is clicked', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        prefix: {
+          id: 'example-prefix-id',
+          title: 'Example prefix title',
+          text: 'Example prefix text',
+        },
+      }),
+    );
+    await page.click('.ons-js-input-abbr');
+    const focusedElementId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedElementId).toEqual('example-id');
+  });
+});

package/components/label/_macro.njk

@@ -1,8 +1,8 @@
 {% macro onsLabel(params) %}
     {% if params.id %}
-        {% set descriptionID = params.id ~ "-description-hint" %}  
+        {% set descriptionID = params.id ~ "-description-hint" %}
     {% else %}
-        {% set descriptionID = "description-hint" %}  
+        {% set descriptionID = "description-hint" %}
     {% endif %}
 
     {% if params.inputType == "checkbox" or params.inputType == "radio" %}

package/components/navigation/_macro.njk

@@ -27,6 +27,7 @@
                         },
                         "instructions": params.siteSearchAutosuggest.instructions,
                         "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
+                        "minChars": params.siteSearchAutosuggest.minChars,
                         "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
                         "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
                         "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
@@ -36,7 +37,8 @@
                         "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
                         "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
                         "noResults": params.siteSearchAutosuggest.noResults,
-                        "typeMore": params.siteSearchAutosuggest.typeMore
+                        "typeMore": params.siteSearchAutosuggest.typeMore,
+                        "language": params.siteSearchAutosuggest.language
                     }) }}
                 </div>
             {% endif %}

package/components/related-content/_macro.njk

@@ -1,36 +1,34 @@
 {% macro onsRelatedContent(params) %}
 
-  {% if params.classes %}
-    {% set classes = ' ' + params.classes %}
-  {% endif %}
+    {% if params.classes %}
+        {% set classes = ' ' + params.classes %}
+    {% endif %}
 
-  <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
-    {% if params.rows %}
-      {% for row in params.rows %}
-        {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
-        {% call onsRelatedContentSection(
-          {
-            "title": row.title,
-            "id": row.id
-          }
-        ) %}            
-          <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+    <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
+        {% if params.rows %}
+            {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
             {% from "components/list/_macro.njk" import onsList %}
-            {{
-              onsList({
-                "variants": 'bare',
-                "iconType": row.iconType,
-                "iconPosition": row.iconPosition,
-                "iconSize": row.iconSize,
-                "itemsList": row.itemsList
-              })
-            }}
-          </nav>
-        {% endcall %}
-      {% endfor %}
-    {% else %}
-      {{ caller() if caller }}
-    {% endif %}
-  </aside>
+            {% for row in params.rows %}
+                {% call onsRelatedContentSection({
+                    "title": row.title,
+                    "id": row.id
+                }) %}
+                    <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+                        {{
+                            onsList({
+                                "variants": 'bare',
+                                "iconType": row.iconType,
+                                "iconPosition": row.iconPosition,
+                                "iconSize": row.iconSize,
+                                "itemsList": row.itemsList
+                            })
+                        }}
+                    </nav>
+                {% endcall %}
+            {% endfor %}
+        {% else %}
+            {{ caller() if caller }}
+        {% endif %}
+    </aside>
 
 {% endmacro %}

package/components/section-navigation/_macro.njk

@@ -1,59 +1,72 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-  <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
-    {% if params.sections %}
-      {% for section in params.sections %}
-        <div class="ons-section-nav__sub">
-          {% if section.title %}
-            <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>{% endif %}
-              <ul class="ons-section-nav__list">
-                {% for item in section.itemsList %}
-                  {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
-                    {% set isCurrent = true %}
-                  {% else %}
-                    {% set isCurrent = false %}
-                  {% endif %}
-                  <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                    <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                      {% if item.anchors and isCurrent == true %}
-                          <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
-                              {% for anchor in item.anchors %}
-                                  <li class="ons-section-nav__item ons-list__item">
-                                      <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                                  </li>
-                              {% endfor %}
-                          </ul>
-                      {% endif %}
-                  </li>
-                {% endfor %}
-              </ul>
-        </div>
-      {% endfor %} 
-      {% else %} 
-        {% if params.title %}
-          <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
-        {% endif %}
+    {% set headingLevel = params.headingLevel | int | default(2) %}
+    {% set sectionTitleHeadingLevel =  headingLevel + 1 %}
+    <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
+    <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
+        {% if params.sections %}
+            {% for section in params.sections %}
+                {% set sectionItemHeadingLevel =  headingLevel + 2 if section.title else headingLevel + 1 %}
+                <div class="ons-section-nav__sub">
+                    {% if section.title %}
+                        <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
+                    {% endif %}
+                    <ul class="ons-section-nav__list">
+                        {% for item in section.itemsList %}
+                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                                {% set isCurrent = true %}
+                            {% else %}
+                                {% set isCurrent = false %}
+                            {% endif %}
+                            <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                              {% if isCurrent == true %} 
+                                  <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                              {% else %}
+                                  <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                              {% endif %}
+                            {% if item.anchors and isCurrent == true %}
+                                    <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                        {% for anchor in item.anchors %}
+                                            <li class="ons-section-nav__item ons-list__item">
+                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            {% endfor %}
+        {% else %}
+            {% if params.title %}
+                <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h{{ sectionTitleHeadingLevel }}>
+            {% endif %}
             <ul class="ons-section-nav__list">
-              {% for item in params.itemsList %}
-                {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
-                  {% set isCurrent = true %}
-                {% else %}
-                  {% set isCurrent = false %}
-                {% endif %}
-                <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                  <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                    {% if item.anchors %}
-                        <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
-                            {% for anchor in item.anchors %}
-                                <li class="ons-section-nav__item ons-list__item">
-                                    <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
+                {% for item in params.itemsList %}
+                    {% set sectionItemHeadingLevel =  headingLevel + 2 if params.title else headingLevel + 1 %}
+                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                        {% set isCurrent = true %}
+                    {% else %}
+                        {% set isCurrent = false %}
                     {% endif %}
-                </li>
-              {% endfor %}
-            </ul>  
-    {% endif %}  
-  </nav>
+                    <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                        {% if isCurrent == true %} 
+                            <h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                        {% else %}
+                            <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                        {% endif %}
+                        {% if item.anchors %}
+                            <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                {% for anchor in item.anchors %}
+                                    <li class="ons-section-nav__item ons-list__item">
+                                        <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </nav>
 {% endmacro %}