Bottom tab bar with notch
The active tab rises into a floating bubble and the bar is cut beneath it by a notch that follows.
Settings
Code
<nav class="uv-nnb" aria-label="Navigation"><div class="br"></div><span class="bu" aria-hidden="true"></span><label><input type="radio" name="uv-nnb" checked><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11l8-6.5 8 6.5V20h-5v-5.5h-6V20H4z"/></svg></span><span class="tx">Home</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg></span><span class="tx">Search</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span><span class="tx">Create</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 17.5V7a2.5 2.5 0 0 1 2.5-2.5h9A2.5 2.5 0 0 1 19 7v6a2.5 2.5 0 0 1-2.5 2.5H9z"/></svg></span><span class="tx">Messages</span></label><label><input type="radio" name="uv-nnb"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20c.8-3.8 3.9-6 7.5-6s6.7 2.2 7.5 6"/></svg></span><span class="tx">Profile</span></label></nav>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 Navigation
See all NavigationWhere to use it
Notched tab bars are a favorite of mobile app concepts because the active section literally stands out. Choosing a tab slides a colored bubble along the top edge with a spring, lifts the icon into it in white, and moves a circular cutout in the bar so the bubble always sits in its own notch, while the label below takes the accent color.
The notch is a CSS mask driven by a registered custom property, and the tabs are radio buttons, so the whole bar works without JavaScript and with arrow keys. Swap icons and labels, keep five items or fewer, and pick a strong main color for the bubble.