@ons/design-system 50.0.1 → 51.0.0

package/components/mutually-exclusive/mutually-exclusive.email.spec.js

@@ -0,0 +1,117 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS = {
+  id: 'email',
+  type: 'email',
+  legend: 'Get a confirmation email',
+  label: {
+    text: 'Enter an email',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear your email',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'email-exclusive-option',
+        name: 'no-email',
+        value: 'no-email',
+        label: {
+          text: 'I dont want to receive a confirmation email',
+        },
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('email input', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('input', EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS));
+    });
+
+    describe('Given the user populated the email input', () => {
+      beforeEach(async () => {
+        await page.type('#email', 'email@email.com');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#email-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#email-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the email input should be cleared', async () => {
+          const inputValue = await page.$eval('#email', node => node.value);
+          expect(inputValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the email input has been cleared', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Enter an email cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#email-exclusive-option');
+      });
+
+      describe('when the user populates the email input', () => {
+        beforeEach(async () => {
+          await page.type('#email', 'email@email.com');
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#email-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(false);
+        });
+
+        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I dont want to receive a confirmation email deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the email input or checked the exclusive option', () => {
+      describe('when the user populates the email input', () => {
+        beforeEach(async () => {
+          await page.type('#email', 'email@email.com');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#email-exclusive-option');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});

package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js

@@ -0,0 +1,213 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = {
+  legend: 'What type of central heating do you have?',
+  checkboxesLabel: 'Select all that apply',
+  name: 'mutually-exclusive',
+  checkboxes: [
+    {
+      id: 'gas',
+      label: {
+        text: 'Gas',
+      },
+      value: 'gas',
+    },
+    {
+      id: 'electric',
+      label: {
+        text: 'Electric',
+      },
+      value: 'electric',
+    },
+    {
+      id: 'solid-fuel',
+      label: {
+        text: 'Solid fuel',
+      },
+      value: 'solid-fuel',
+    },
+    {
+      id: 'other-fuel',
+      label: {
+        text: 'Other',
+      },
+      value: 'other',
+      other: {
+        id: 'other-fuel-textbox',
+        name: 'other-fuel-answer',
+        label: {
+          text: 'Please specify',
+        },
+      },
+    },
+  ],
+  mutuallyExclusive: {
+    or: 'or',
+    deselectMessage: 'Selecting this will uncheck all other checkboxes',
+    deselectGroupAdjective: 'deselected',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'no-central-heating',
+        label: {
+          text: 'No central heating',
+        },
+        value: 'no-central-heating',
+      },
+      {
+        id: 'dont-know',
+        label: {
+          text: 'Dont know',
+        },
+        value: 'dont-know',
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('checkboxes', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('checkboxes', EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS));
+    });
+
+    describe('Given the user has clicked multiple non-exclusive options', () => {
+      beforeEach(async () => {
+        await page.click('#gas');
+        await page.click('#electric');
+        await page.click('#other-fuel');
+        await page.type('#other-fuel-textbox', 'Biofuel');
+      });
+
+      describe('when the user clicks a mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#dont-know');
+        });
+
+        it('then the mutually exclusive option is checked', async () => {
+          const isChecked = await page.$eval('#dont-know', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the checkboxes are not checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(false);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(false);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel-textbox', node => node.value)).toBe('');
+        });
+
+        it('then the aria-live message should reflect the removed non exclusive options', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has clicked the mutually exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#dont-know');
+      });
+
+      describe('when the user clicks the non-exclusive options', () => {
+        beforeEach(async () => {
+          await page.click('#gas');
+          await page.click('#electric');
+          await page.click('#other-fuel');
+        });
+
+        it('then the expected checkboxes are checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(true);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(true);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(true);
+        });
+
+        it('then the exclusive options should not be checked', async () => {
+          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', node => node.checked)).toBe(false);
+        });
+
+        it('then the aria-live message should reflect the removed exclusive option', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Dont know deselected.');
+        });
+
+        describe('and the user deselects an non-exclusive option', () => {
+          beforeEach(async () => {
+            await page.click('#electric');
+          });
+
+          it('the aria-live message should not be updated', async () => {
+            await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+            const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+            expect(alertText).toBe('Dont know deselected.');
+          });
+        });
+      });
+    });
+
+    describe('Given the user has not clicked the mutually exclusive option', () => {
+      describe('when the user clicks multiple non-exclusive options', () => {
+        beforeEach(async () => {
+          await page.click('#gas');
+          await page.click('#electric');
+          await page.click('#other-fuel');
+        });
+
+        it('then the expected checkboxes are checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(true);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(true);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(true);
+        });
+
+        it('then the exclusive options should not be checked', async () => {
+          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', node => node.checked)).toBe(false);
+        });
+
+        it('then the aria-live message should say nothing', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+
+    describe('Given the user has not clicked any of the non-exclusive options', () => {
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#dont-know');
+        });
+
+        it('then the expected checkboxes are not checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(false);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(false);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(false);
+        });
+
+        it('then the exclusive option should be checked', async () => {
+          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', node => node.checked)).toBe(true);
+        });
+
+        it('then the aria-live message should say nothing', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});

package/components/mutually-exclusive/mutually-exclusive.number.spec.js

@@ -0,0 +1,125 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
+  id: 'currency',
+  type: 'number',
+  legend: 'What is your annual income before tax in 2018/19?',
+  width: '5',
+  attributes: {
+    min: 0,
+  },
+  label: {
+    text: 'Gross annual income',
+  },
+  prefix: {
+    title: 'Pounds',
+    text: '£',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear your inputted annual income',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'currency-exclusive-option',
+        name: 'no-currency',
+        value: 'no-currency',
+        label: {
+          text: 'I prefer not to say',
+        },
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('number input', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('input', EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS));
+    });
+
+    describe('Given the user populated the number input', () => {
+      beforeEach(async () => {
+        await page.type('#currency', '25000');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#currency-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#currency-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the number input should be cleared', async () => {
+          const inputValue = await page.$eval('#currency', node => node.value);
+          expect(inputValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the number input has been cleared', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Gross annual income cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#currency-exclusive-option');
+      });
+
+      describe('when the user populates the number input', () => {
+        beforeEach(async () => {
+          await page.type('#currency', '25000');
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#currency-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(false);
+        });
+
+        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I prefer not to say deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the number input or checked the exclusive option', () => {
+      describe('when the user populates the number input', () => {
+        beforeEach(async () => {
+          await page.type('#currency', '25000');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#currency-exclusive-option');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -0,0 +1,131 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS = {
+  id: 'feedback',
+  name: 'feedback',
+  width: '30',
+  legend: 'What do you think of this service?',
+  label: {
+    text: 'Enter your feedback',
+    description: 'For example describe any difficulties you experienced in the use of this service',
+  },
+  charCheckLimit: {
+    limit: 200,
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear your feedback',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'feedback-exclusive-option',
+        name: 'no-feedback',
+        value: 'no-feedback',
+        label: {
+          text: 'I dont want to provide feedback',
+        },
+      },
+    ],
+  },
+};
+
+const FAKE_TEXTAREA_INPUT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+describe('script: mutually-exclusive', () => {
+  describe('textarea', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('textarea', EXAMPLE_MUTUALLY_EXCLUSIVE_TEXTAREA_PARAMS));
+    });
+
+    describe('Given the user populated the textarea', () => {
+      beforeEach(async () => {
+        await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#feedback-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the textarea should be cleared', async () => {
+          const textareaValue = await page.$eval('#feedback', node => node.value);
+          expect(textareaValue).toBe('');
+        });
+
+        it('then the characters remaining readout should be reset', async () => {
+          const limitText = await page.$eval('#feedback-lim-remaining', node => node.textContent);
+          expect(limitText).toBe('You have 200 characters remaining');
+        });
+
+        it('then the aria alert should tell the user that the textarea has been cleared', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Enter your feedback cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusiveOption', () => {
+      beforeEach(async () => {
+        await page.click('#feedback-exclusive-option');
+      });
+
+      describe('when the user populates the textarea', () => {
+        beforeEach(async () => {
+          await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(false);
+        });
+
+        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I dont want to provide feedback deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the textarea or checked the exclusive option', () => {
+      describe('when the user populates the textarea', () => {
+        beforeEach(async () => {
+          await page.type('#feedback', FAKE_TEXTAREA_INPUT);
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#feedback-exclusive-option');
+        });
+
+        it('then the aria alert shouldnt say anything', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});

package/components/navigation/_macro.njk

@@ -31,7 +31,7 @@
                     }) }}
                 </div>
             {% endif %}
-            <nav class="ons-navigation ons-js-navigation" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
+            <nav class="ons-navigation ons-navigation--main 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) }}">
@@ -47,7 +47,7 @@
             <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) }}">
+                        <li class="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 %}
@@ -66,19 +66,19 @@
                     "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">
+            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="{{ params.subNavigation.id }}--mobile" aria-hidden="true" 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">
+                    <ul class="ons-navigation__list ons-navigation__list--parent">
                         <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>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% 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">
+                                        <ul class="ons-navigation__list ons-navigation__list--child 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>