Browser-style tabs
Tabs that activate, close by shrinking away and open with the plus button, just like a browser.
Settings
Code
<div class="uv-nbr"><div class="st" role="tablist" aria-label="Tabs"><div class="tb" style="--f:#ef4444"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Mail</span></button><button type="button" class="x" aria-label="Close Mail"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><div class="tb on" style="--f:#3b82f6"><button type="button" role="tab" aria-selected="true" class="lb"><i></i><span>Calendar</span></button><button type="button" class="x" aria-label="Close Calendar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><div class="tb" style="--f:#a855f7"><button type="button" role="tab" aria-selected="false" class="lb"><i></i><span>Final design</span></button><button type="button" class="x" aria-label="Close Final design"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="ad" aria-label="New tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></div><div class="tl"><span class="ur"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg><span class="u">calendario.app</span></span></div></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 Navigation
See all NavigationWhere to use it
Workspace apps, editors and dashboards increasingly use browser-style tabs to keep several documents open. The active tab merges into the address bar with curved corners, inactive tabs lighten on hover, the close button shrinks a tab out of the row and activates its neighbor, and the plus button slides in a new tab and selects it.
Tabs share the available width and truncate long titles with an ellipsis, and the address bar shows a slug for the active tab. The tab buttons use the tab role with aria-selected, and up to five tabs can be open at once in the demo.