🐘 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.

📝
Notes

Some notes that may help you decipher this.
  1. 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.
  2. Uses absolute position to fix the tab image to the screens edge.
  3. magic-links_component has a max-height to prevent the tab change from bouncing/shifting content below it up/down.
  4. Custom code in page settings </body> as well as in the tabs-custom-css embed.
  5. Not 100% optimized for mobile.