Organic glass-inspired tab navigation
When apple released their Liquid glass User Interface it inspired me to create a new pen about an organic navigation that changes shape when you click or navigate with it.
It’s a POC with accessible aria access for screen readers but also has arrow navigation enabled when you focus a tab button element.
By default the first tab is focused when you arrive on the page to allow to navigate with keybord but you can click elsewhere or click directly on an element to change the displayed tab.
The content is minimalist as it was realized pretty quickly (without AI).
See the Pen Organic glass-inspired tab navigation by Adrien Martinet (@Yexan) on CodePen.
Interesting points I’ve practiced on this POC :
- I read some documentation about accessibility and WAI-ARIA patterns
- I initally did a full css approach but you lose the moving part of the indicator if you only use
[aria-selected="true"]and before or after pseudo elements as they are relative to each buttons - it was fun to simulate small changes on the indicator element and play with the focus state