Give your Webflow website superpowers with Attributes by Finsweet. Seriously. Superpowers.
🐘 Don't think about elephants
Tab link-ception– A link “in” a tab link. Non-native tabs.
Inspired by Webflow's homepage tab component and also used on https://www.flowmaestro.dev/ This implement is handy because it respects tab order (keyboard navigation).
![Screen recording showing a user interacting with the tab element on the webflow.com homepage. The user clicks on the tabs and also uses keyboard navigation to navigate between them and the links within them.](https://assets.website-files.com/6285a412a967d00b8c0101b0/637a951a9d37fd3b5bac2f22_CleanShot%202022-11-20%20at%2012.56.24.gif)
📝
Notes
Some notes that may help you decipher this.
- This is a non-native tab element. That uses absolute positioning and z-index to effectively place a link-within-a-link as well as CSS transitions to animate the tab change.
- Uses absolute position to fix the tab image to the screens edge.
- magic-links_component has a max-height to prevent the tab change from bouncing/shifting content below it up/down.
- Custom code in page settings </body> as well as in the tabs-custom-css embed.
- Not 100% optimized for mobile.