🐘 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.
Clone it!
@tonyseets

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