Design Study: How Arc Browser Killed the Tab Bar
The Browser Company raised $50 million to answer a question nobody was asking: why does browser UI still look like 2008?[^1]
Why Does Arc’s Design Matter?
Arc proved that even the most entrenched interfaces can be reimagined. Chrome, Firefox, Safari—all follow the same basic layout established decades ago. Tabs across the top, URL bar below, content underneath. Arc broke free by treating the browser as a workspace, not a window manager.
Josh Miller, The Browser Company’s CEO, framed the challenge: “The browser is the operating system now. So why does it still look like software from 2008?”
The design achievements: - Eliminated the traditional tab bar entirely - Made browser chrome feel native to macOS - Created meaningful personal/work separation - Pioneered browser-level site customization - Built for keyboard-first navigation
How Does the Sidebar Model Work?
Arc’s most visible innovation: replacing horizontal tabs with a vertical sidebar that organizes content by context, not recency.
TRADITIONAL TAB BAR:
┌──────────────────────────────────────────────────────────────┐
│ [←][→][↻] │ Tab 1 │ Tab 2 │ Tab 3 │ Tab 4 │ Tab 5 │ ... │ + │
├──────────────────────────────────────────────────────────────┤
│ │
│ Page Content │
│ │
└──────────────────────────────────────────────────────────────┘
Problems: Tabs shrink to unreadable, no organization, endless row
ARC'S SIDEBAR MODEL:
┌────────────────┬─────────────────────────────────────────────┐
│ ◉ Space Name │ │
│ ───────────── │ │
│ 📌 Pinned │ │
│ Gmail │ │
│ Calendar │ Page Content │
│ Notion │ (full width) │
│ │ │
│ ───────────── │ │
│ Today │ │
│ Tab 1 │ │
│ Tab 2 │ │
│ Tab 3 │ │
│ │ │
│ [+ New Tab] │ │
└────────────────┴─────────────────────────────────────────────┘
Benefits: Readable titles, pinned favorites, organized by purpose
The key insight: horizontal space is premium; vertical space is abundant. Using the sidebar lets tab titles breathe. Users see full page names instead of truncated favicons.
CSS Implementation Pattern
.sidebar {
--sidebar-width: 240px;
--sidebar-collapsed: 48px;
width: var(--sidebar-width);
height: 100vh;
display: flex;
flex-direction: column;
background: var(--surface-1);
transition: width 0.2s ease-out;
}
.sidebar.collapsed {
width: var(--sidebar-collapsed);
}
.sidebar.collapsed .tab-title {
opacity: 0;
pointer-events: none;
}
/* Hover to peek */
.sidebar.collapsed:hover {
width: var(--sidebar-width);
}
.sidebar.collapsed:hover .tab-title {
opacity: 1;
transition: opacity 0.15s ease-in 0.1s; /* Delay for smooth reveal */
}
SwiftUI Implementation Pattern
struct SidebarView: View {
@State private var isCollapsed = false
@State private var isHovering = false
private var effectiveWidth: CGFloat {
isCollapsed && !isHovering ? 48 : 240
}
var body: some View {
VStack(alignment: .leading, spacing: 0) {
PinnedSection()
Divider()
TodaySection()
Spacer()
NewTabButton()
}
.frame(width: effectiveWidth)
.animation(.easeOut(duration: 0.2), value: effectiveWidth)
.onHover { isHovering = $0 }
}
}
What Are Spaces and Why Do They Matter?
Spaces separate work from personal, project from project. Each Space is a complete browser context with its own tabs, pinned sites, and color theme.
SPACE ARCHITECTURE:
┌─────────────────────────────────────────────────────────────┐
│ Arc Browser │
├───────────┬───────────┬───────────┬─────────────────────────┤
│ Work │ Personal │ Project │ │
│ Space │ Space │ Space │ Content Area │
│ ───── │ ───── │ ───── │ │
│ • Slack │ • Gmail │ • GitHub │ │
│ • Docs │ • Reddit │ • Figma │ │
│ • Jira │ • Netflix│ • Notion │ │
└───────────┴───────────┴───────────┴─────────────────────────┘
Each Space has:
├── Unique pinned tabs
├── Separate "Today" tabs
├── Own color theme/gradient
├── Isolated browsing context
└── Keyboard shortcut (Cmd+1, Cmd+2, etc.)
The key insight: mental contexts shouldn’t leak. Work tabs appearing during personal time creates cognitive friction. A Slack notification while watching Netflix breaks immersion.
Data Model
interface Space {
id: string;
name: string;
icon?: string;
gradient: {
from: string;
to: string;
angle: number;
};
pinnedTabs: Tab[];
todayTabs: Tab[];
archivedTabs: Tab[];
profile?: BrowserProfile; // Different cookies, history, etc.
}
interface Tab {
id: string;
url: string;
title: string;
favicon?: string;
isPinned: boolean;
lastAccessed: Date;
parentFolderId?: string;
}
SwiftUI Implementation
struct SpaceSwitcher: View {
@Binding var currentSpace: Space
let spaces: [Space]
var body: some View {
HStack(spacing: 8) {
ForEach(spaces) { space in
SpaceButton(
space: space,
isActive: space.id == currentSpace.id
) {
withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
currentSpace = space
}
}
}
}
.padding(.horizontal, 12)
}
}
struct SpaceButton: View {
let space: Space
let isActive: Bool
let action: () -> Void
var body: some View {
Button(action: action) {
Circle()
.fill(
LinearGradient(
colors: [space.gradient.from, space.gradient.to],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.frame(width: 24, height: 24)
.overlay {
if isActive {
Circle()
.strokeBorder(.white, lineWidth: 2)
}
}
}
.buttonStyle(.plain)
.keyboardShortcut(space.keyboardShortcut)
}
}
How Does the Command Bar Replace Traditional Navigation?
Arc’s Command Bar (Cmd+T) isn’t just a URL bar—it’s a universal search across tabs, history, bookmarks, and actions.
COMMAND BAR INTERACTION:
┌─────────────────────────────────────────────────────────────┐
│ 🔍 Search tabs, history, or type a URL... │
├─────────────────────────────────────────────────────────────┤
│ OPEN TABS │
│ 📄 Notion - Project Planning ⌘1 │
│ 📄 GitHub - Pull Request #123 │
│ │
│ HISTORY │
│ 🕐 Figma - Design System (2 hours ago) │
│ 🕐 MDN - CSS Grid Guide (yesterday) │
│ │
│ ACTIONS │
│ ⚡ New Note ⌘⇧N │
│ ⚡ Split View ⌘⇧\ │
│ ⚡ Copy URL ⌘⇧C │
└─────────────────────────────────────────────────────────────┘
The key insight: finding should be faster than organizing. Good search eliminates the need for perfect organization. Users don’t need to remember where they put something—they type what they remember.
CSS Implementation Pattern
.command-bar {
--bar-width: min(600px, 90vw);
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: var(--bar-width);
background: var(--surface-elevated);
border-radius: var(--radius-lg);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.command-input {
width: 100%;
padding: 16px 20px;
font-size: 18px;
background: transparent;
border: none;
color: var(--text-primary);
}
.command-results {
max-height: 400px;
overflow-y: auto;
border-top: 1px solid var(--border-subtle);
}
.command-result {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
cursor: pointer;
}
.command-result:hover,
.command-result.selected {
background: var(--surface-hover);
}
.command-result-shortcut {
margin-left: auto;
font-size: 12px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
What Are Boosts and How Do They Give Users Control?
Boosts let users inject custom CSS and JavaScript into any website—personal dark modes, decluttered interfaces, or enhanced functionality.
BOOST CONCEPT:
Without Boost: With Boost:
┌─────────────────────┐ ┌─────────────────────┐
│ [Header] │ │ │
│ [Navigation] │ │ │
│ [Sidebar] [Content] │ → │ [Content] │
│ [Footer] │ │ (clean, focused)│
│ [Cookie Banner] │ │ │
└─────────────────────┘ └─────────────────────┘
The key insight: every user has sites they visit daily but wish worked differently. YouTube’s recommendations distract. Twitter’s trending topics waste time. News sites bury content under ads. Boosts let users fix these problems without browser extensions.
Implementation Pattern
interface Boost {
id: string;
name: string;
domain: string; // "github.com" or "*.google.com"
enabled: boolean;
css?: string;
js?: string;
createdAt: Date;
}
// Example Boost: Clean YouTube
const youtubeBoost: Boost = {
id: 'youtube-clean',
name: 'Clean YouTube',
domain: 'youtube.com',
enabled: true,
css: `
/* Hide recommendations */
#secondary,
ytd-browse[page-subtype="home"] ytd-rich-grid-renderer {
display: none !important;
}
/* Hide comments */
#comments {
display: none !important;
}
/* Expand video */
#primary {
max-width: 100% !important;
}
`
};
What Is Little Arc and When Should You Use It?
Little Arc is a separate, minimal window for quick tasks—one tab, no chrome, distraction-free.
FULL ARC: LITTLE ARC:
┌────────┬────────────────┐ ┌────────────────────────┐
│Sidebar │ │ │ ← google.com/search... │
│ │ Content │ ├────────────────────────┤
│ │ │ │ │
│ │ │ → │ Search Results │
│ │ │ │ (just the content) │
└────────┴────────────────┘ └────────────────────────┘
Use cases:
- Quick search
- Checking one thing
- Opening links from other apps
The key insight: not every task needs the full browser. Match the interface to the task’s weight. A quick search doesn’t deserve a 240px sidebar.
CSS Pattern (Minimal Chrome)
.mini-browser {
--chrome-height: 36px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.mini-chrome {
height: var(--chrome-height);
display: flex;
align-items: center;
padding: 0 12px;
background: var(--surface-1);
gap: 8px;
}
.mini-url-bar {
flex: 1;
padding: 4px 8px;
font-size: 13px;
background: var(--surface-2);
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
.mini-content {
height: calc(100% - var(--chrome-height));
}
What Patterns Can You Steal From Arc?
Pattern 1: Ephemeral vs. Persistent
Arc’s “Today” section auto-archives tabs after 12 hours. Persistent items must be explicitly pinned.
interface EphemeralityConfig {
defaultLifetime: number; // milliseconds
onExpire: 'archive' | 'close' | 'prompt';
exceptions: string[]; // domains that never expire
}
function shouldArchive(tab: Tab, config: EphemeralityConfig): boolean {
const age = Date.now() - tab.lastAccessed.getTime();
if (config.exceptions.includes(new URL(tab.url).hostname)) {
return false;
}
return age > config.defaultLifetime;
}
Pattern 2: Split View
Side-by-side browsing without managing separate windows.
struct SplitView: View {
@State private var splitRatio: CGFloat = 0.5
let leftTab: Tab
let rightTab: Tab
var body: some View {
GeometryReader { geometry in
HStack(spacing: 1) {
WebView(tab: leftTab)
.frame(width: geometry.size.width * splitRatio)
// Draggable divider
Rectangle()
.fill(.quaternary)
.frame(width: 4)
.gesture(
DragGesture()
.onChanged { value in
let newRatio = value.location.x / geometry.size.width
splitRatio = max(0.2, min(0.8, newRatio))
}
)
WebView(tab: rightTab)
}
}
}
}
Pattern 3: Gradient Identities
Each Space has a unique gradient that provides instant visual recognition.
.space-gradient {
--gradient-work: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-personal: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-project: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.space-indicator {
width: 100%;
height: 4px;
background: var(--current-gradient);
}
.space-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--current-gradient);
display: flex;
align-items: center;
justify-content: center;
}
Frequently Asked Questions
Why did Arc replace the horizontal tab bar with a vertical sidebar?
Horizontal space is premium; vertical space is abundant. Traditional tab bars shrink tabs to unreadable widths when users open many pages. Arc's sidebar displays full tab titles vertically, allows organization by context (pinned, today, archived), and can collapse to icons when not needed. The sidebar also enables Spaces—isolated browsing contexts that horizontal tabs can't support.
How do Arc Spaces differ from Chrome profiles?
Chrome profiles require switching accounts entirely—different bookmarks, extensions, and login states. Arc Spaces exist within one account but maintain separate tab sets, themes, and optionally separate cookies/history. Users switch Spaces with Cmd+1/2/3, staying in one browser while keeping work and personal contexts visually and organizationally distinct.
What are Arc Boosts and how do they work?
Boosts let users inject custom CSS and JavaScript into any website at the browser level. Unlike extensions that require installation and permissions, Boosts are site-specific modifications. Common uses include hiding YouTube recommendations, applying dark themes to sites that don't support them, or removing distracting elements from news sites. Boosts persist across sessions and sync across devices.
How can I implement a command bar like Arc's in my own app?
Arc's Command Bar combines: (1) a fixed-position modal triggered by a keyboard shortcut, (2) a fuzzy search index across multiple content types (tabs, history, actions), (3) categorized results with keyboard navigation, and (4) inline shortcuts displayed next to results. Libraries like cmdk (React), kbar, or Ninja Keys provide starting points. The key is indexing everything searchable upfront.
What design lessons from Arc apply to non-browser products?
Six lessons transfer broadly: (1) challenge entrenched patterns—the tab bar wasn't sacred; (2) separate mental contexts—don't let work bleed into personal; (3) keyboard-first navigation—power users avoid the mouse; (4) progressive complexity—simple by default, powerful on demand; (5) user customization—let people make software their own; (6) appropriate weight—match interface complexity to task complexity.
Quick Summary
Arc Browser proved that 15-year-old interface conventions aren’t laws of physics. The sidebar replaces horizontal tabs with organized, readable vertical navigation. Spaces isolate mental contexts with distinct themes and tab sets. The Command Bar makes finding faster than organizing. Boosts give users control over sites they visit daily. Little Arc matches interface weight to task weight. For product designers, Arc demonstrates that questioning fundamental assumptions can unlock entirely new interaction paradigms.
References
[^1]: The Browser Company raises $50M Series B. TechCrunch
This post is part of the Design Studies series exploring the design decisions behind exceptional products. See also: Notion, Things 3.
For foundational design principles, see the complete design guide.