Panels of one page (the job's Overview, Estimate, Takeoff). Tabs change what's shown, not what's saved. Arrow keys move between tabs (specimen.js). Labels are sentence case.
Live example
Overview panel.
Estimate panel.
Takeoff panel.
States and sizes
SelectedDefaultHoverFocus
Medium · 48InvoicesPayments
<div class="tabs" role="tablist" aria-label="Job sections">
<button class="tab" role="tab" aria-selected="true" aria-controls="p1" id="t1">Overview</button>
<button class="tab" role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1">Estimate</button>
</div>