diff --git a/packages/tabs/README.md b/packages/tabs/README.md
index 051369b6..34ab453b 100644
--- a/packages/tabs/README.md
+++ b/packages/tabs/README.md
@@ -64,6 +64,14 @@ const [ instance ] = tabs(elements);
 }
 ```
 
+## Setting the active tab
+```
+On page load the active tab will be set by (in order of precedence):
+1. The page hash.  If the page hash in the address bar matches the ID of a panel, it will be activated on page load
+2. The data-active-index attribute.  If the tabs node found to have a <pre>data-active-index</pre> attribute, that tab will be activated on page load.  This is a zero-based index.   
+3. The tab specified by the activeIndex in the settings. This is a zero-based index.
+4. The first tab in the set.
+
 ## API
 
 tabs() returns an array of instances. Each instance exposes the interface
diff --git a/packages/tabs/__tests__/unit/utils.js b/packages/tabs/__tests__/unit/utils.js
index 21fb38a8..8e783255 100644
--- a/packages/tabs/__tests__/unit/utils.js
+++ b/packages/tabs/__tests__/unit/utils.js
@@ -1,4 +1,4 @@
-import { getActiveIndexByHash } from '../../src/lib/utils';
+import { getActiveIndexByHash, getActiveIndexOnLoad } from '../../src/lib/utils';
 
 const init = () => {
     document.body.innerHTML = `<div role="tablist" data-active-index="1">
@@ -63,3 +63,69 @@ describe(`Tabs > utils > getActiveIndexByHash`, () => {
     });
 
 });
+
+const initWithAttribute = () => {
+    document.body.innerHTML = `<div role="tablist" data-active-index="2">
+        <nav class="tabs__nav">
+            <a id="tab-1" class="tabs__nav-link js-tabs__link" href="#panel-1" role="tab">Tab 1</a>
+            <a id="tab-2" class="tabs__nav-link js-tabs__link " href="#panel-2" role="tab">Tab 2</a>
+            <a id="tab-3" class="tabs__nav-link js-tabs__link" href="#panel-3" role="tab">Tab 3</a>
+        </nav>
+        <section id="panel-1" class="tabs__section" role="tabpanel">Panel 1</section>
+        <section id="panel-2" class="tabs__section" role="tabpanel">
+                <p>Panel 2</p>
+                <p><a href="/">Test link</a></p>
+                <p><a href="/">Test link</a></p>
+        </section>
+        <section id="panel-3" class="tabs__section" role="tabpanel">
+            <p>Panel 3</p>
+            <p><a href="/">Test link</a></p>
+            <p><a href="/">Test link</a></p>
+        </section>
+    </div>`;
+};
+
+
+describe(`Tabs > utils > getActiveIndexOnLoad`, () => {
+    beforeAll(initWithAttribute);
+
+    it('should use the data attribute if no hash is available', async () => {
+        delete global.window.location;
+        global.window = Object.create(window);
+        global.window.location = {
+            port: '123',
+            protocol: 'http:',
+            hostname: 'localhost',
+            hash: ''
+        };
+        const node = document.querySelector('[role="tablist"]');
+        const panels = [].slice.call(document.querySelectorAll('[role=tabpanel]'));
+        expect(getActiveIndexOnLoad(panels, node)).toEqual(2);
+    });
+
+    it('should return undefined if neither hash or attribute', async () => {
+        const node = document.querySelector('[role="tablist"]');
+        node.removeAttribute('data-active-index');
+        const panels = [].slice.call(document.querySelectorAll('[role=tabpanel]'));
+        expect(getActiveIndexOnLoad(panels, node)).toEqual(undefined);
+    });
+   
+    it('should use the hash as priority if available', async () => {
+        const node = document.querySelector('[role="tablist"]');
+        node.setAttribute('data-active-index', "1");
+
+        delete global.window.location;
+        global.window = Object.create(window);
+        global.window.location = {
+            port: '123',
+            protocol: 'http:',
+            hostname: 'localhost',
+            hash: '#panel-3'
+        };
+
+        const panels = [].slice.call(document.querySelectorAll('[role=tabpanel]'));   
+        expect(getActiveIndexOnLoad(panels, node)).toEqual(2);
+    });
+
+});
+
diff --git a/packages/tabs/example/src/index.html b/packages/tabs/example/src/index.html
index 0e8b8047..86be9fbf 100644
--- a/packages/tabs/example/src/index.html
+++ b/packages/tabs/example/src/index.html
@@ -78,13 +78,13 @@
     </style>
   </head>
   <body>
-    <div class="tabs js-tabs">
-        <div class="tabs__tabslist" role="tablist">
+    <div class="tabs js-tabs" >
+        <div class="tabs__tabslist" role="tablist" data-active-index="2">
             <a id="tab-1" class="tabs__tab js-tabs__link" href="#panel-1" role="tab">Tab 1</a>
             <a id="tab-2" class="tabs__tab js-tabs__link" href="#panel-2" role="tab">Tab 2</a>
             <a id="tab-3" class="tabs__tab js-tabs__link" href="#panel-3" role="tab">Tab 3</a>
         </div>
-        <div id="panel-1" class="tabs__tabpanel" role="tabpanel">Panel 1</div>
+        <div id="panel-1" class="tabs__tabpanel" role="tabpanel" hidden>Panel 1</div>
         <div id="panel-2" class="tabs__tabpanel" role="tabpanel" hidden>Panel 2</div>
         <div id="panel-3" class="tabs__tabpanel" role="tabpanel" hidden>Panel 3</div>
     </div>
diff --git a/packages/tabs/src/lib/factory.js b/packages/tabs/src/lib/factory.js
index 346cdd6e..69485e79 100644
--- a/packages/tabs/src/lib/factory.js
+++ b/packages/tabs/src/lib/factory.js
@@ -1,6 +1,6 @@
 import { createStore } from './store';
 import { findTabsAndPanels, initUI, open } from './dom';
-import { getActiveIndexByHash } from './utils';
+import { getActiveIndexOnLoad } from './utils';
 
 /* 
  * @param settings, Object, merged defaults + options passed in as instantiation config to module default
@@ -11,11 +11,11 @@ import { getActiveIndexByHash } from './utils';
 export default ({ node, settings }) => {
     const Store = createStore();
     const { tabs, panels } = findTabsAndPanels(node, settings);
-    const activeIndex = getActiveIndexByHash(panels);
+    const activeIndex = getActiveIndexOnLoad(panels, node);
     Store.dispatch({
         settings,
         node,
-        activeIndex: activeIndex !== undefined ? +activeIndex : +settings.activeIndex,
+        activeIndex: activeIndex !== undefined  ? +activeIndex : +settings.activeIndex,
         activeTabIndex: activeIndex !== undefined ? +activeIndex : +settings.activeIndex,
         tabs,
         panels,
diff --git a/packages/tabs/src/lib/utils.js b/packages/tabs/src/lib/utils.js
index 7fc06546..79b7470a 100644
--- a/packages/tabs/src/lib/utils.js
+++ b/packages/tabs/src/lib/utils.js
@@ -8,6 +8,10 @@ export const getActiveIndexByHash = panels => {
     }, undefined);
 };
 
+export const getActiveIndexOnLoad = (panels, node) => {
+     return (location.hash) ? getActiveIndexByHash(panels) : (node.getAttribute("data-active-index")) ? parseInt(node.getAttribute("data-active-index")) : undefined;
+};
+
 /*
  * Converts a passed selector which can be of varying types into an array of DOM Objects
  *