Icon tabs with expanding label
Only the active tab shows its label; the others stay as icons, which saves space on small screens.
Settings
Code
<div class="uv-fti"><button class="on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2h-3v-6H9v6H6a2 2 0 0 1-2-2z"/></svg><b>Home</b></button><button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4.3-4.3"/></svg><b>Search</b></button><button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 3.5C19 16.5 12 21 12 21z"/></svg><b>Favorites</b></button><button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0"/></svg><b>Profile</b></button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
This is the bottom bar you see in plenty of shopping and delivery apps: Home, Search, Favourites, Profile. Showing the label only on the active tab keeps the bar compact while still telling people where they are. It suits a mobile web shop or a PWA. You'll also find it described as an animated bottom navigation bar.
Pick icons people recognise without a label, because three of the four will be shown bare. A house, a magnifier and a heart are safe bets. Four items fit comfortably; five starts to crowd a small phone.