diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b8facfb3c..79a22e61ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,12 @@
 
   ([PR #990](https://github.com/alphagov/govuk-frontend/pull/990))
 
+- Allow attributes to be added to some child items in header, footer, breadcrumbs, tabs and error-summary components
+
+  You can now pass additional attributes to links in header, footer, breadcrumbs, tabs and error-summary components
+
+  ([PR #993](https://github.com/alphagov/govuk-frontend/pull/993))
+
 - Pull Request Title goes here
 
   Description goes here (optional)
diff --git a/src/components/breadcrumbs/README.md b/src/components/breadcrumbs/README.md
index 8b7a6d2905..64f99d3f66 100644
--- a/src/components/breadcrumbs/README.md
+++ b/src/components/breadcrumbs/README.md
@@ -288,6 +288,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>
diff --git a/src/components/breadcrumbs/README.njk b/src/components/breadcrumbs/README.njk
index 58917e2b10..0faaec20b3 100644
--- a/src/components/breadcrumbs/README.njk
+++ b/src/components/breadcrumbs/README.njk
@@ -71,6 +71,20 @@ The Breadcrumbs component helps users to understand where they are within a webs
         text: 'Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item'
       }
     ],
+    [
+      {
+        text: 'items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.'
+      }
+    ],
     [
       {
         text: 'classes'
diff --git a/src/components/breadcrumbs/template.njk b/src/components/breadcrumbs/template.njk
index 1c4e9cebfc..e89b9bf0a5 100644
--- a/src/components/breadcrumbs/template.njk
+++ b/src/components/breadcrumbs/template.njk
@@ -3,7 +3,7 @@
   {% for item in params.items %}
     {% if item.href %}
     <li class="govuk-breadcrumbs__list-item">
-      <a class="govuk-breadcrumbs__link" href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+      <a class="govuk-breadcrumbs__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
     </li>
     {% else %}
     <li class="govuk-breadcrumbs__list-item" aria-current="page">{{ item.html | safe if item.html else item.text }}</li>
diff --git a/src/components/breadcrumbs/template.test.js b/src/components/breadcrumbs/template.test.js
index daa33c24e0..dd2b20a2b7 100644
--- a/src/components/breadcrumbs/template.test.js
+++ b/src/components/breadcrumbs/template.test.js
@@ -79,6 +79,25 @@ describe('Breadcrumbs', () => {
       expect($item.html()).toEqual('&lt;span&gt;Section 1&lt;/span&gt;')
     })
 
+    it('renders item anchor with attributes', () => {
+      const $ = render('breadcrumbs', {
+        items: [
+          {
+            'text': 'Section 1',
+            'href': '/section',
+            'attributes': {
+              'data-attribute': 'my-attribute',
+              'data-attribute-2': 'my-attribute-2'
+            }
+          }
+        ]
+      })
+
+      const $breadcrumbLink = $('.govuk-breadcrumbs__link')
+      expect($breadcrumbLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($breadcrumbLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
+
     it('renders item with html', () => {
       const $ = render('breadcrumbs', {
         items: [
diff --git a/src/components/error-summary/README.md b/src/components/error-summary/README.md
index adc2d9a4d2..845aa1ac8b 100644
--- a/src/components/error-summary/README.md
+++ b/src/components/error-summary/README.md
@@ -168,6 +168,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">errorList.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the error link anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>
diff --git a/src/components/error-summary/README.njk b/src/components/error-summary/README.njk
index c2dc633205..f3bcba49bd 100644
--- a/src/components/error-summary/README.njk
+++ b/src/components/error-summary/README.njk
@@ -101,6 +101,20 @@
         text: 'Text or HTML for the error link item. If `html` is provided, the `text` argument will be ignored.'
       }
     ],
+    [
+      {
+        text: 'errorList.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the error link anchor.'
+      }
+    ],
     [
       {
         text: 'classes'
diff --git a/src/components/error-summary/template.njk b/src/components/error-summary/template.njk
index 79c9fab116..49b34b4595 100644
--- a/src/components/error-summary/template.njk
+++ b/src/components/error-summary/template.njk
@@ -14,7 +14,7 @@
     {% for item in params.errorList %}
       <li>
       {% if item.href %}
-        <a href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+        <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
       {% else %}
         {{ item.html | safe if item.html else item.text }}
       {% endif %}
diff --git a/src/components/error-summary/template.test.js b/src/components/error-summary/template.test.js
index 87494a0b3a..76bb66d0d5 100644
--- a/src/components/error-summary/template.test.js
+++ b/src/components/error-summary/template.test.js
@@ -128,6 +128,25 @@ describe('Error-summary', () => {
     expect(errorItem.attr('href')).toEqual('#example-error-1')
   })
 
+  it('renders anchor tag with attributes', () => {
+    const $ = render('error-summary', {
+      errorList: [
+        {
+          'text': 'Error-1',
+          'href': '#item',
+          'attributes': {
+            'data-attribute': 'my-attribute',
+            'data-attribute-2': 'my-attribute-2'
+          }
+        }
+      ]
+    })
+
+    const $component = $('.govuk-error-summary__list a')
+    expect($component.attr('data-attribute')).toEqual('my-attribute')
+    expect($component.attr('data-attribute-2')).toEqual('my-attribute-2')
+  })
+
   it('renders error item text', () => {
     const $ = render('error-summary', examples.default)
     const errorItemText = $('.govuk-error-summary .govuk-error-summary__list li:first-child').text().trim()
diff --git a/src/components/footer/README.md b/src/components/footer/README.md
index f29f108a75..924c8d49c5 100644
--- a/src/components/footer/README.md
+++ b/src/components/footer/README.md
@@ -177,6 +177,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">meta.items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">navigation</th>
 
 <td class="govuk-table__cell ">array</td>
@@ -249,6 +261,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">navigation.items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">containerClasses</th>
 
 <td class="govuk-table__cell ">string</td>
diff --git a/src/components/footer/README.njk b/src/components/footer/README.njk
index 8d606ca2a8..54adfd16f8 100644
--- a/src/components/footer/README.njk
+++ b/src/components/footer/README.njk
@@ -114,6 +114,20 @@
         text: 'List item href attribute in the meta section of the footer.'
       }
     ],
+    [
+      {
+        text: 'meta.items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section.'
+      }
+    ],
     [
       {
         text: 'navigation'
@@ -198,6 +212,20 @@
         text: 'List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.'
       }
     ],
+    [
+      {
+        text: 'navigation.items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.'
+      }
+    ],
     [
       {
         text: 'containerClasses'
diff --git a/src/components/footer/template.njk b/src/components/footer/template.njk
index 17378de66a..71f3dc00c1 100644
--- a/src/components/footer/template.njk
+++ b/src/components/footer/template.njk
@@ -16,7 +16,7 @@
                 {% for item in item.items %}
                   {% if item.href and item.text %}
                     <li class="govuk-footer__list-item">
-                      <a class="govuk-footer__link" href="{{ item.href }}">
+                      <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                         {{ item.text }}
                       </a>
                     </li>
@@ -37,7 +37,7 @@
             <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">
-                  <a class="govuk-footer__link" href="{{ item.href }}">
+                  <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                     {{ item.text }}
                   </a>
                 </li>
diff --git a/src/components/footer/template.test.js b/src/components/footer/template.test.js
index 26112a6c75..f2b258a412 100644
--- a/src/components/footer/template.test.js
+++ b/src/components/footer/template.test.js
@@ -105,6 +105,27 @@ describe('footer', () => {
       const $custom = $component.find('.govuk-footer__meta-custom')
       expect($custom.text()).toContain('GOV.UK Prototype Kit v7.0.1')
     })
+
+    it('renders attributes on meta links', () => {
+      const $ = render('footer', {
+        meta: {
+          items: [
+            {
+              href: '#1',
+              text: 'meta item 1',
+              attributes: {
+                'data-attribute': 'my-attribute',
+                'data-attribute-2': 'my-attribute-2'
+              }
+            }
+          ]
+        }
+      })
+
+      const $metaLink = $('.govuk-footer__meta .govuk-footer__link')
+      expect($metaLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($metaLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
   })
 
   describe('navigation', () => {
@@ -139,6 +160,29 @@ describe('footer', () => {
       expect($firstItem.text()).toContain('Navigation item 1')
     })
 
+    it('renders attributes on links', () => {
+      const $ = render('footer', {
+        navigation: [
+          {
+            items: [
+              {
+                href: '#1',
+                text: 'Navigation item 1',
+                attributes: {
+                  'data-attribute': 'my-attribute',
+                  'data-attribute-2': 'my-attribute-2'
+                }
+              }
+            ]
+          }
+        ]
+      })
+
+      const $navigationLink = $('.govuk-footer__list .govuk-footer__link')
+      expect($navigationLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($navigationLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
+
     it('renders lists in columns', () => {
       const $ = render('footer', examples['with navigation'])
 
diff --git a/src/components/header/README.md b/src/components/header/README.md
index 3561e0c95f..9745f28c39 100644
--- a/src/components/header/README.md
+++ b/src/components/header/README.md
@@ -473,6 +473,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">navigation.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the navigation item anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">navigationClasses</th>
 
 <td class="govuk-table__cell ">string</td>
diff --git a/src/components/header/README.njk b/src/components/header/README.njk
index 52d6440210..5307116e5e 100644
--- a/src/components/header/README.njk
+++ b/src/components/header/README.njk
@@ -156,6 +156,20 @@
         text: 'Flag to mark the navigation item as active or not.'
       }
     ],
+    [
+      {
+        text: 'navigation.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the navigation item anchor.'
+      }
+    ],
     [
       {
         text: 'navigationClasses'
diff --git a/src/components/header/template.njk b/src/components/header/template.njk
index 62997030eb..45286d655a 100644
--- a/src/components/header/template.njk
+++ b/src/components/header/template.njk
@@ -69,7 +69,7 @@
         {% for item in params.navigation %}
           {% if item.href and item.text %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
-              <a class="govuk-header__link" href="{{ item.href }}">
+              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                 {{ item.text }}
               </a>
             </li>
diff --git a/src/components/header/template.test.js b/src/components/header/template.test.js
index 51612a8a4a..5f3b10cb62 100644
--- a/src/components/header/template.test.js
+++ b/src/components/header/template.test.js
@@ -104,6 +104,24 @@ describe('header', () => {
       expect($firstItem.text()).toContain('Navigation item 1')
     })
 
+    it('renders navigation item anchor with attributes', () => {
+      const $ = render('header', {
+        navigation: [
+          {
+            'text': 'Item',
+            'href': '/link',
+            'attributes': {
+              'data-attribute': 'my-attribute',
+              'data-attribute-2': 'my-attribute-2'
+            }
+          }
+        ]
+      })
+
+      const $navigationLink = $('.govuk-header__navigation-item a')
+      expect($navigationLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($navigationLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
     describe('menu button', () => {
       it('has an explicit type="button" so it does not act as a submit button', () => {
         const $ = render('header', examples['with navigation'])
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
index 235bbf94b5..95ff96dacf 100644
--- a/src/components/tabs/README.md
+++ b/src/components/tabs/README.md
@@ -286,7 +286,7 @@ If you are using Nunjucks,then macros take the following arguments
 
 <td class="govuk-table__cell ">No</td>
 
-<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the details element</td>
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the tabs container</td>
 
 </tr>
 
@@ -340,6 +340,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the tab item anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">items.{}.panel.text (or) items.{}.panel.html</th>
 
 <td class="govuk-table__cell ">string</td>
@@ -350,6 +362,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 </tr>
 
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">items.{}.panel.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the tab panel.</td>
+
+</tr>
+
 </tbody>
 
 </table>
diff --git a/src/components/tabs/README.njk b/src/components/tabs/README.njk
index c9460dc84d..c5d53dc7e6 100644
--- a/src/components/tabs/README.njk
+++ b/src/components/tabs/README.njk
@@ -70,7 +70,7 @@
         text: 'No'
       },
       {
-        text: 'Any extra HTML attributes (for example data attributes) to add to the details element'
+        text: 'Any extra HTML attributes (for example data attributes) to add to the tabs container'
       }
     ],
     [
@@ -129,6 +129,20 @@
         text: 'The text label of a tab item'
       }
     ],
+    [
+      {
+        text: 'items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the tab item anchor.'
+      }
+    ],
     [
       {
         text: 'items.{}.panel.text (or) items.{}.panel.html'
@@ -142,6 +156,20 @@
       {
         text: 'Text or HTML to use within each tab panel. If `html` is provided, the `text` argument will be ignored.'
       }
+    ],
+    [
+      {
+        text: 'items.{}.panel.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the tab panel.'
+      }
     ]
   ]
 })}}
diff --git a/src/components/tabs/template.njk b/src/components/tabs/template.njk
index 4ec039b83f..1df1bb42e7 100644
--- a/src/components/tabs/template.njk
+++ b/src/components/tabs/template.njk
@@ -12,7 +12,7 @@
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
       <li class="govuk-tabs__list-item">
-        <a class="govuk-tabs__tab" href="#{{ id }}">
+        <a class="govuk-tabs__tab" href="#{{ id }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
           {{ item.label }}
         </a>
       </li>
@@ -22,7 +22,7 @@
 
   {% for item in params.items %}
   {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-  <section class="govuk-tabs__panel" id="{{ id }}">
+  <section class="govuk-tabs__panel" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {{ item.panel.html | safe if item.panel.html else item.panel.text }}
   </section>
   {% endfor %}
diff --git a/src/components/tabs/template.test.js b/src/components/tabs/template.test.js
index ee4f5b3ab3..0a40f1c579 100644
--- a/src/components/tabs/template.test.js
+++ b/src/components/tabs/template.test.js
@@ -165,6 +165,47 @@ describe('Tabs', () => {
         const $firstPanel = $component.find('.govuk-tabs__panel')
         expect($firstPanel.html().trim()).toEqual('<p>Panel 1 content</p>')
       })
+
+      it('render a tab anchor with attributes', () => {
+        const $ = render('tabs', {
+          items: [
+            {
+              id: 'tab-1',
+              label: 'Tab 1',
+              attributes: {
+                'data-attribute': 'my-attribute',
+                'data-attribute-2': 'my-attribute-2'
+              }
+            }
+          ]
+        })
+
+        const $tabItemLink = $('.govuk-tabs__tab')
+        expect($tabItemLink.attr('data-attribute')).toEqual('my-attribute')
+        expect($tabItemLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+      })
+
+      it('render a tab panel with attributes', () => {
+        const $ = render('tabs', {
+          items: [
+            {
+              id: 'tab-1',
+              label: 'Tab 1',
+              panel: {
+                text: 'Panel text',
+                attributes: {
+                  'data-attribute': 'my-attribute',
+                  'data-attribute-2': 'my-attribute-2'
+                }
+              }
+            }
+          ]
+        })
+
+        const $tabPanelItems = $('.govuk-tabs__panel')
+        expect($tabPanelItems.attr('data-attribute')).toEqual('my-attribute')
+        expect($tabPanelItems.attr('data-attribute-2')).toEqual('my-attribute-2')
+      })
     })
   })
 })