@ons/design-system 72.4.0 → 72.5.0

package/components/chart/example-line-chart.njk

@@ -0,0 +1,219 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{{
+    onsChart({
+        "chartType": "line",
+        "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
+        "theme": "alternate",
+        "title": "Sales volumes and values saw moderate growth in July 2024",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "id",
+        "headingLevel": 4,
+        "caption": "Source: Monthly Business Survey, Retails Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+            {
+                "text": "Excel spreadsheet (XLSX format, 18KB)",
+                "url": "#"
+            },
+            {
+                "text": "Simple text file (CSV format, 25KB)",
+                "url": "#"
+            },
+            {
+
+                "text": "Image (PNG format, 25KB)",
+                "url": "#"
+            }
+        ]},
+        "legend": "true",
+        "xAxis": {
+            "title": "Year",
+            "type": "linear",
+            "labelFormat": "{value:,.f}",
+            "categories": [
+                'Oct 2014',
+                'Nov 2014',
+                'Dec 2014',
+                'Jan 2015',
+                'Feb 2015',
+                'Mar 2015',
+                'Apr 2015',
+                'May 2015',
+                'Jun 2015',
+                'Jul 2015',
+                'Aug 2015',
+                'Sep 2015',
+                'Oct 2015',
+                'Nov 2015',
+                'Dec 2015',
+                'Jan 2016',
+                'Feb 2016',
+                'Mar 2016',
+                'Apr 2016',
+                'May 2016',
+                'Jun 2016',
+                'Jul 2016',
+                'Aug 2016',
+                'Sep 2016',
+                'Oct 2016',
+                'Nov 2016',
+                'Dec 2016',
+                'Jan 2017',
+                'Feb 2017',
+                'Mar 2017',
+                'Apr 2017',
+                'May 2017',
+                'Jun 2017',
+                'Jul 2017',
+                'Aug 2017',
+                'Sep 2017',
+                'Oct 2017',
+                'Nov 2017',
+                'Dec 2017',
+                'Jan 2018',
+                'Feb 2018',
+                'Mar 2018',
+                'Apr 2018',
+                'May 2018',
+                'Jun 2018',
+                'Jul 2018',
+                'Aug 2018',
+                'Sep 2018',
+                'Oct 2018',
+                'Nov 2018',
+                'Dec 2018',
+                'Jan 2019',
+                'Feb 2019',
+                'Mar 2019',
+                'Apr 2019',
+                'May 2019',
+                'Jun 2019',
+                'Jul 2019',
+                'Aug 2019',
+                'Sep 2019',
+                'Oct 2019',
+                'Nov 2019',
+                'Dec 2019',
+                'Jan 2020',
+                'Feb 2020',
+                'Mar 2020',
+                'Apr 2020',
+                'May 2020',
+                'Jun 2020',
+                'Jul 2020',
+                'Aug 2020',
+                'Sep 2020',
+                'Oct 2020',
+                'Nov 2020',
+                'Dec 2020',
+                'Jan 2021',
+                'Feb 2021',
+                'Mar 2021',
+                'Apr 2021',
+                'May 2021',
+                'Jun 2021',
+                'Jul 2021',
+                'Aug 2021',
+                'Sep 2021',
+                'Oct 2021',
+                'Nov 2021',
+                'Dec 2021',
+                'Jan 2022',
+                'Feb 2022',
+                'Mar 2022',
+                'Apr 2022',
+                'May 2022',
+                'Jun 2022',
+                'Jul 2022',
+                'Aug 2022',
+                'Sep 2022',
+                'Oct 2022',
+                'Nov 2022',
+                'Dec 2022',
+                'Jan 2023',
+                'Feb 2023',
+                'Mar 2023',
+                'Apr 2023',
+                'May 2023',
+                'Jun 2023',
+                'Jul 2023',
+                'Aug 2023',
+                'Sep 2023',
+                'Oct 2023',
+                'Nov 2023',
+                'Dec 2023',
+                'Jan 2024',
+                'Feb 2024',
+                'Mar 2024',
+                'Apr 2024',
+                'May 2024',
+                'Jun 2024',
+                'Jul 2024',
+                'Aug 2024',
+                'Sep 2024',
+                'Oct 2024'
+            ]
+        },
+        "yAxis": {
+            "title": "Sales",
+            "labelFormat": "{value:,.f}"
+        },
+        "series": [
+            {
+                "name": 'CPIH',
+                "data": [
+                    1.3, 1.1, 0.7, 0.5, 0.4, 0.3, 0.3, 0.4, 0.3, 0.5, 0.4, 0.2, 0.2, 0.4, 0.5, 0.6,
+                    0.6, 0.8, 0.7, 0.7, 0.8, 0.9, 1.0, 1.3, 1.3, 1.5, 1.8, 1.9, 2.3, 2.3, 2.6, 2.7,
+                    2.6, 2.6, 2.7, 2.8, 2.8, 2.8, 2.7, 2.7, 2.5, 2.3, 2.2, 2.3, 2.3, 2.3, 2.4, 2.2,
+                    2.2, 2.2, 2.0, 1.8, 1.8, 1.8, 2.0, 1.9, 1.9, 2.0, 1.7, 1.7, 1.5, 1.5, 1.4, 1.8,
+                    1.7, 1.5, 0.9, 0.7, 0.8, 1.1, 0.5, 0.7, 0.9, 0.6, 0.8, 0.9, 0.7, 1.0, 1.6, 2.1,
+                    2.4, 2.1, 3.0, 2.9, 3.8, 4.6, 4.8, 4.9, 5.5, 6.2, 7.8, 7.9, 8.2, 8.8, 8.6, 8.8,
+                    9.6, 9.3, 9.2, 8.8, 9.2, 8.9, 7.8, 7.9, 7.3, 6.4, 6.3, 6.3, 4.7, 4.2, 4.2, 4.2,
+                    3.8, 3.8, 3.0, 2.8, 2.8, 3.1, 3.1, 2.6, 3.2
+                ]
+            },
+            {
+                "name": 'Goods',
+                "data": [
+                    0.3, -0.2, -1.0, -1.5, -2.0, -2.1, -1.9, -1.8, -2.0, -1.8, -2.0, -2.4, -2.1,
+                    -1.9, -2.1, -1.5, -1.6, -1.7, -1.6, -1.8, -1.7, -1.5, -1.4, -0.5, -0.4, 0.2,
+                    0.7, 1.1, 1.9, 2.5, 2.4, 3.0, 2.6, 2.7, 3.1, 3.2, 3.3, 3.3, 3.4, 3.2, 3.0, 2.4,
+                    2.6, 2.5, 2.5, 2.6, 2.7, 2.5, 2.3, 2.1, 1.8, 1.2, 1.3, 1.3, 1.4, 1.5, 1.5, 1.7,
+                    1.2, 0.9, 0.4, 0.5, 0.6, 1.3, 1.0, 0.6, -0.4, -0.9, -0.5, 0.0, -0.2, -0.3, 0.1,
+                    -0.7, -0.2, -0.2, -0.5, 0.1, 1.6, 2.3, 2.9, 2.5, 3.3, 3.5, 4.9, 6.5, 6.9, 7.2,
+                    8.3, 9.4, 12.4, 12.4, 12.7, 13.6, 13.0, 13.2, 14.8, 14.1, 13.4, 13.3, 13.4,
+                    12.7, 10.0, 9.7, 8.5, 6.1, 6.3, 6.2, 2.9, 2.0, 1.9, 1.8, 1.1, 0.9, -0.8, -1.3,
+                    -1.4, -0.5, -0.9, -1.4, -0.3
+                ]
+            },
+            {
+                "name": 'Services',
+                "data": [
+                    2.2, 2.1, 2.1, 2.1, 2.2, 2.2, 2.0, 2.1, 2.1, 2.2, 2.2, 2.2, 2.1, 2.2, 2.5, 2.2,
+                    2.3, 2.6, 2.4, 2.6, 2.7, 2.6, 2.7, 2.6, 2.5, 2.4, 2.5, 2.5, 2.6, 2.2, 2.8, 2.6,
+                    2.5, 2.4, 2.5, 2.5, 2.4, 2.4, 2.2, 2.3, 2.1, 2.1, 1.9, 2.1, 2.0, 2.0, 2.2, 2.0,
+                    2.1, 2.2, 2.1, 2.2, 2.2, 2.2, 2.5, 2.3, 2.2, 2.2, 2.0, 2.2, 2.2, 2.2, 1.9, 2.1,
+                    2.2, 2.2, 1.9, 1.8, 1.7, 2.0, 1.0, 1.5, 1.5, 1.5, 1.6, 1.7, 1.6, 1.6, 1.7, 1.9,
+                    2.1, 1.8, 2.7, 2.5, 2.9, 3.0, 3.1, 3.1, 3.2, 3.7, 4.1, 4.3, 4.5, 4.9, 5.1, 5.3,
+                    5.3, 5.4, 5.8, 5.2, 5.6, 5.7, 6.0, 6.3, 6.3, 6.5, 6.1, 6.3, 6.2, 6.0, 6.0, 6.1,
+                    6.0, 6.0, 6.0, 5.9, 6.0, 5.7, 5.9, 5.6, 5.6
+                ]
+            },
+            {
+                "name": 'CPIH excl energy, food, alcohol & tobacco',
+                "data": [
+                    1.5, 1.3, 1.4, 1.5, 1.4, 1.2, 1.1, 1.2, 1.0, 1.3, 1.2, 1.2, 1.3, 1.4, 1.5, 1.4,
+                    1.4, 1.6, 1.5, 1.5, 1.6, 1.6, 1.5, 1.7, 1.6, 1.7, 1.8, 1.8, 2.1, 1.9, 2.4, 2.5,
+                    2.4, 2.4, 2.6, 2.5, 2.5, 2.5, 2.3, 2.4, 2.2, 2.1, 2.0, 2.0, 1.8, 1.8, 1.9, 1.8,
+                    1.8, 1.8, 1.8, 1.8, 1.8, 1.8, 1.7, 1.7, 1.7, 1.9, 1.5, 1.6, 1.7, 1.7, 1.4, 1.6,
+                    1.7, 1.6, 1.5, 1.3, 1.5, 1.8, 1.0, 1.4, 1.5, 1.2, 1.5, 1.5, 1.1, 1.3, 1.5, 2.0,
+                    2.3, 1.9, 2.9, 2.7, 3.1, 3.6, 3.8, 4.0, 4.6, 5.1, 5.4, 5.2, 5.2, 5.5, 5.6, 5.8,
+                    5.8, 5.7, 5.8, 5.3, 5.7, 5.7, 6.2, 6.5, 6.4, 6.4, 5.9, 5.9, 5.6, 5.2, 5.2, 5.1,
+                    4.8, 4.7, 4.4, 4.2, 4.2, 4.1, 4.3, 4.0, 4.1
+                ]
+            }
+        ]
+    })
+}}

package/components/chart/example-stacked-bar-chart.njk

@@ -0,0 +1,60 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+{{
+    onsChart({
+        "chartType": "bar",
+        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "theme": "primary",
+        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "uuid",
+        "useStackedLayout": true,
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": true,
+        "series": [
+            {
+                "data": [5, 3, 4, 6],
+                "dataLabels": false,
+                "name": "2022"
+            },
+            {
+                "data": [2, 2, 3, 7],
+                "dataLabels": false,
+                "name": "2023"
+            },
+            {
+                "data": [3, 4, 4, 1],
+                "dataLabels": false,
+                "name": "2024"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Food stores",
+                "Non-food stores",
+                "Non-store retailing ",
+                "Automotive fuel"
+            ],
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percent (%)"
+        }
+    })
+}}

package/components/chart/example-stacked-column-chart.njk

@@ -0,0 +1,65 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+{{
+    onsChart({
+        "chartType": "column",
+        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "theme": "primary",
+        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
+        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "id": "uuid",
+        "useStackedLayout": true,
+        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
+        "download": {
+            'title': 'Download Figure 1 data',
+            'itemsList': [
+                {
+                    "text": "Excel spreadsheet (XLSX format, 18KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Simple text file (CSV format, 25KB)",
+                    "url": "#"
+                },
+                {
+                    "text": "Image (PNG format, 25KB)",
+                    "url": "#"
+                }
+            ]
+        },
+        "legend": true,
+        "series": [
+            {
+                "data": [5, 3, 4, 6, 2, 2, 3, 7],
+                "dataLabels": false,
+                "name": "2022"
+            },
+            {
+                "data": [2, 2, 3, 7, 3, 4, 4, 1],
+                "dataLabels": false,
+                "name": "2023"
+            },
+            {
+                "data": [3, 4, 4, 1, 5, 3, 4, 6],
+                "dataLabels": false,
+                "name": "2024"
+            }
+        ],
+        "xAxis": {
+            "categories": [
+                "Food stores",
+                "Non-food stores",
+                "Non-store retailing ",
+                "Automotive fuel",
+                "Household goods stores",
+                "Clothing stores",
+                "Other stores",
+                "All retailing"
+            ],
+            "title": "Items",
+            "type": "linear"
+        },
+        "yAxis": {
+            "title": "Percentage of GDP (%)"
+        }
+    })
+}}

package/components/chart/line-chart.js

@@ -0,0 +1,47 @@
+class LineChart {
+    getLineChartOptions = () => {
+        return {
+            legend: {
+                // Specific legend symbol width and height for line charts
+                symbolWidth: 20,
+                symbolHeight: 3,
+            },
+            plotOptions: {
+                line: {
+                    lineWidth: 3,
+                    linecap: 'round',
+                    // In a later PR we will update the marker styles
+                    marker: {
+                        enabled: false,
+                        radius: 4,
+                        symbol: 'circle',
+                        lineWidth: 0,
+                    },
+                },
+            },
+        };
+    };
+
+    updateLastPointMarker = (currentChart) => {
+        currentChart.series.forEach((series) => {
+            // If markers are disabled, hide them all but the last point marker
+            if (series.options.marker.enabled.enabled === undefined) {
+                const points = series.points;
+                if (points && points.length > 0) {
+                    // Show only the last point marker
+                    const lastPoint = points[points.length - 1];
+                    lastPoint.update(
+                        {
+                            marker: {
+                                enabled: true,
+                            },
+                        },
+                        false,
+                    );
+                }
+            }
+        });
+    };
+}
+
+export default LineChart;

package/components/chart/specific-chart-options.js

@@ -0,0 +1,22 @@
+import ChartConstants from './chart-constants';
+
+// Options that rely on the chart config but are not specific to the chart type
+class SpecificChartOptions {
+    constructor(theme, type, config) {
+        this.constants = ChartConstants.constants();
+        this.theme = theme;
+        this.config = config;
+
+        this.options = {
+            colors: this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme,
+            chart: {
+                type: type,
+                marginTop: this.config.legend.enabled ? undefined : 50,
+            },
+        };
+    }
+
+    getOptions = () => this.options;
+}
+
+export default SpecificChartOptions;

package/components/footer/_footer.scss

@@ -62,4 +62,16 @@
             @extend .ons-u-mb-2xs;
         }
     }
+
+    &__logo-large {
+        @include mq('2xs', 414px) {
+            display: none;
+        }
+    }
+
+    &__logo-small {
+        @include mq(415px) {
+            display: none;
+        }
+    }
 }

package/components/footer/_macro.njk

@@ -9,23 +9,44 @@
     {% endif %}
     {% set extraLogo = params.footerLogo.logos.logo2 %}
     {% set onsLogo %}
-        {% if params.lang == 'cy' %}
-            {{-
-                onsIcon({
-                    "iconType": 'ons-logo-stacked-cy' if extraLogo else 'ons-logo-cy',
-                    "altText": 'Swyddfa Ystadegau Gwladol',
-                    "altTextId": 'ons-logo-cy-footer-alt'
-                })
-            -}}
-        {% else %}
-            {{-
-                onsIcon({
-                    "iconType": 'ons-logo-stacked-en' if extraLogo else 'ons-logo-en' ,
-                    "altText": 'Office for National Statistics',
-                    "altTextId": 'ons-logo-en-footer-alt'
-                })
-            -}}
-        {% endif %}
+        <div class="ons-footer__logo-large">
+            {% if params.lang == 'cy' %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-cy' if extraLogo else 'ons-logo-cy',
+                        "altText": 'Swyddfa Ystadegau Gwladol',
+                        "altTextId": 'ons-logo-cy-footer-alt'
+                    })
+                -}}
+            {% else %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-en' if extraLogo else 'ons-logo-en',
+                        "altText": 'Office for National Statistics',
+                        "altTextId": 'ons-logo-en-footer-alt'
+                    })
+                -}}
+            {% endif %}
+        </div>
+        <div class="ons-footer__logo-small">
+            {% if params.lang == 'cy' %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-cy',
+                        "altText": 'Swyddfa Ystadegau Gwladol',
+                        "altTextId": 'ons-logo-stacked-cy-footer-alt'
+                    })
+                -}}
+            {% else %}
+                {{-
+                    onsIcon({
+                        "iconType": 'ons-logo-stacked-en',
+                        "altText": 'Office for National Statistics',
+                        "altTextId": 'ons-logo-stacked-en-footer-alt'
+                    })
+                -}}
+            {% endif %}
+        </div>
     {% endset %}
 
     <footer class="ons-footer">

package/components/header/_header.scss

@@ -168,13 +168,13 @@
     }
 
     &__org-logo--large {
-        @include mq('2xs', 454px) {
+        @include mq('2xs', 460px) {
             display: none;
         }
     }
 
     &__org-logo--small {
-        @include mq(455px) {
+        @include mq(461px) {
             display: none;
         }
     }
@@ -278,6 +278,22 @@
         }
     }
 
+    &-nav-search {
+        background-color: var(--ons-color-branded-tint);
+        margin-bottom: 1rem;
+        @extend .ons-u-pt-2xl;
+        @extend .ons-u-pb-2xl;
+
+        width: 100%;
+        &__input {
+            border-bottom: 1px solid var(--ons-color-ocean-blue);
+            @extend .ons-u-mb-2xl;
+            @extend .ons-u-pb-2xl;
+
+            row-gap: 1rem;
+        }
+    }
+
     .ons-btn {
         top: 0 !important;
     }

package/components/header/_macro.njk

@@ -180,20 +180,21 @@
                             {% endif %}
                         </div>
                     {% endif %}
-                    {% if params.menuLinks %}
-                        <div class="ons-header__links ons-grid__col ons-u-ml-auto">
+
+                    {% if params.variants == "basic" %}
+                        <div class="ons-grid__col ons-col-auto">
                             {% if params.menuLinks %}
-                                <div class="ons-grid__col ons-col-auto">
+                                <div class="ons-header__links ons-grid__col">
                                     {{
                                         onsButton({
-                                            "text": params.menuLinks.toggleNavButton.text | default("Menu"),
-                                            "classes": "ons-u-fs-s--b ons-js-toggle-services button-nav",
+                                            "text": params.menuLinks.toggleMenuButton.text | default("Menu"),
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-nav-menu button-nav",
                                             "type": "button",
                                             "variants": "menu",
                                             "iconType": "chevron",
                                             "iconPosition": "before",
                                             "attributes": {
-                                                "aria-label": params.menuLinks.toggleNavButton.ariaLabel | default("Toggle menu"),
+                                                "aria-label": params.menuLinks.toggleMenuButton.ariaLabel | default("Toggle menu"),
                                                 "aria-controls": params.menuLinks.id,
                                                 "aria-expanded": "false"
                                             }
@@ -201,6 +202,23 @@
                                     }}
                                 </div>
                             {% endif %}
+                            {% if params.searchLinks %}
+                                <div class="ons-header__links ons-grid__col">
+                                    {{
+                                        onsButton({
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-btn--search ons-btn--search-icon",
+                                            "type": "button",
+                                            "variants": "search",
+                                            "iconType": "search",
+                                            "attributes": {
+                                                "aria-label": params.searchLinks.searchButtonAriaLabel | default("Toggle search"),
+                                                "aria-controls": params.searchLinks.id,
+                                                "aria-expanded": "false"
+                                            }
+                                        })
+                                    }}
+                                </div>
+                            {% endif %}
                         </div>
                     {% endif %}
                 </div>
@@ -240,9 +258,10 @@
                     {% endif %}
                 </nav>
             {% endif %}
-            {% if params.menuLinks %}
+
+            {% if params.variants == "basic" and params.menuLinks %}
                 <nav
-                    class="ons-u-d-no ons-js-services-mobile-nav ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
+                    class="ons-u-d-no ons-js-nav-menu ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
                     id="{{ params.menuLinks.id }}"
                     aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
                 >
@@ -312,6 +331,60 @@
                     {% endif %}
                 </nav>
             {% endif %}
+
+            {% if params.variants == "basic" and params.searchLinks %}
+                <nav
+                    class="ons-u-d-no ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
+                    id="{{ params.searchLinks.id }}"
+                    aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
+                >
+                    <div class="ons-container">
+                        <div class="ons-header-nav-search__input">
+                            {% from "components/input/_macro.njk" import onsInput %}
+                            {{
+                                onsInput({
+                                    "id": 'search-field',
+                                    "width": 'full',
+                                    "label": {
+                                        "text": 'Search the ONS',
+                                        "id": "header-search-input-label"
+                                    },
+                                    "searchButton": {
+                                        "visuallyHideButtonText": true,
+                                        "text": 'Search',
+                                        "iconType": 'search',
+                                        'variant': 'header'
+
+                                    }
+                                })
+                            }}
+                        </div>
+                    </div>
+                    {% if params.searchLinks %}
+                        <div class="ons-container">
+                            <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">{{ params.searchLinks.heading }}</h2>
+                            <ul class="ons-list ons-list--bare ons-list--inline">
+                                {% for item in params.searchLinks.itemsList %}
+                                    {# Limiting the popular searches to 5 #}
+                                    {% if loop.index <= 5 %}
+                                        <li class="ons-list__item">
+                                            {% if item.text %}
+                                                {% if item.url %}
+                                                    <a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
+                                                        >{{ item.text }}
+                                                    </a>
+                                                {% else %}
+                                                    <p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
+                                                {% endif %}
+                                            {% endif %}
+                                        </li>
+                                    {% endif %}
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    {% endif %}
+                </nav>
+            {% endif %}
         </div>
         {% if params.variants != "basic" %}
             <div class="ons-header__main">