This happens often: The content you’re linking to is hidden in a Tab and you’re only linking to the page that the content is on. It leaves your user feeling confused and skeptical, and it’s not hard to see why. It’d be as if you were an Uber driver, dropping your customer off in a sketchy neighborhood they don’t know. It doesn’t matter that it’s only a block away from where they wanted. People want to go directly to where they need to be, so send users directly to the specific content they’re after. When content is hidden in a tab or accordion, a link to the page is not enough. Sure you can link to an id on a piece of content, but the immediate jump to the middle of another page may be jarring and confusing to your users. And what if the content is hidden in a tab that is not open. This is when deep linking comes into play. deep linking is the use of a hyperlink that links to a specific, generally searchable or indexed, piece of content on a website or app.

Setting Up a Deep LInk

Deep linking is turned off by default so we need to add a data-deep-link="true" data attribute to our tabs in order to enable it.

Doing so causes two changes to happen:

1. Now as you click through different tabs, the tabs plugin will update your browser URL to include the anchor (#) portion of the link. These give you the urls you can use for your “deep” links.
2. Any time the page is loaded, it will check the anchor portion of the link to see if it is connected to one of the tabs, and if so automatically open to that tab.

For example, if you click on this link to the docs: http://foundation.zurb.com/sites/docs/tabs.html#panel3d

You will see that in the deep linking example tabs (should be automatically scrolled to) the 3rd panel is opened on page load.

Customizing Deep Link Behavior

Tab Deep Linking has 3 additional options you can play with to customize the behavior. The first is the data-update-history option. By default, clicking between tabs does not change your browser history, so that your ‘back’ button will always go to the previous page. However, if you want each tab click to add to the browser history, such that clicking ‘back’ will take the user to the previous anchor in the url, you do so by setting data-update-history="true".

The other two options go hand in hand: data-deep-link-smudge and data-deep-link-smudge-delay. These options configure the way the browser will scroll to see the opened tab upon a deep link. Regardless of what you set, when a user clicks on a deep link, the browser will scroll to the opened tab. However, there are times when scrolling straight to the tab is not exactly what you want - the panel alone may not be enough, and you want to show the tab strip as well. data-deep-link-smudge rolls the page up slightly after deep linking so that the tabstrip is at the top of the viewport.

---