Menu icon Foundation
Tab Links to New Page/External Link

Is it possible to have a Tab link open to a new page?

If I remove "data-tab" from the UL, it works - however, that makes all of the tab links open to a new page. I want to be able to have only one of the links open to a new page.

Is it possible to have a Tab link open to a new page?

If I remove "data-tab" from the UL, it works - however, that makes all of the tab links open to a new page. I want to be able to have only one of the links open to a new page.

tabs

Is it possible to have a Tab link open to a new page?

If I remove "data-tab" from the UL, it works - however, that makes all of the tab links open to a new page. I want to be able to have only one of the links open to a new page.

Is it possible to have a Tab link open to a new page?

If I remove "data-tab" from the UL, it works - however, that makes all of the tab links open to a new page. I want to be able to have only one of the links open to a new page.

Carl jemson about 4 years ago

geat post
thanks for sharing it...

Brandon Arnold about 4 years ago

tabs disable external links, so that the page doesn't try and use a jump link. This isn't available out of the box, and also just a large UX issue id say.

Jeremy Englert about 4 years ago

Completely agree - in most cases, this would be a UX nightmare. But in this particular case, I think it would be expected behavior.

I was planning on having 3 tabs with featured products and a fourth tab that said "More Products" and linked to a products page.

I'm going to dive into the tabs.js and see what kind of issues would come up if external links were allowed.

Brandon Arnold about 4 years ago

You could also just fake it like this maybe.

http://codepen.io/zurbrandon/pen/pJjMQw?editors=110

Jeremy Englert almost 4 years ago

Brandon, that is exactly the route I ended up taking. Thanks for your help!