Sub nav tabs

Use this component when you have a wide table users will need to scroll horizontally.

Open example in new window
HTML 




<div class="govuk-tabs" data-module="dl-subnav">
    <h2 class="govuk-tabs__title">
      Contents
    </h2>
    <nav class="dl-subnav" aria-label="Sub navigation">
        <ul class="dl-subnav__list">

            <li class="dl-subnav__list-item dl-subnav__list-item--selected">
                <a class="dl-subnav__list-item__link" href="#record" data-module-sub-nav="tab">
                Record
                </a>
            </li>

            <li class="dl-subnav__list-item dl-subnav__list-item--selected">
                <a class="dl-subnav__list-item__link" href="#history" data-module-sub-nav="tab">
                History
                </a>
            </li>

        </ul>
    </nav>


    <div id="record">

<p class="govuk-body">This is the record section.</p>

    </div>

    <div id="history">

<p class="govuk-body">This is the history section.</p>

    </div>

</div>
Jinja 
{%- from "digital-land-frontend/components/sub-nav-tabs/macro.jinja" import dlSubNavTabs %}
{% set recordHTML %}
<p class="govuk-body">This is the record section.</p>
{% endset %}
{% set historyHTML %}
<p class="govuk-body">This is the history section.</p>
{% endset %}
{{ dlSubNavTabs({
    "tabs": [
        {
            "id": "record",
            "label": "Record",
            "html": recordHTML
        },
        {
            "id": "history",
            "label": "History",
            "html": historyHTML
        }
    ]
})
}}

Initialise JS module

The subNavTabs component is a progressive enhancement. You will need to initialise the JS module for it to work.

<script>
    const $subNavTabs = document.querySelector('[data-module="dl-subnav"]')
    const subNavTabsComponent = new DLFrontend.SubNavTabs($subNavTabs).init({})
</script>