Design System
Tabs
Responsive tab navigation with scroll indicators, badge counts, and variant layouts. Handles overflow gracefully across all breakpoints.
Pattern 01
Scrollable Detail Tabs
Used in detail panels with many tabs (applications, roles). Scroll arrows appear automatically when tabs overflow. Supports badge counts per tab.
Application Overview
Summary of the application status, key dates, and current pipeline stage. Shows matching score, recruiter assignment, and quick actions.
Usage
- Use
BaselTabBarfrom@splits-network/basel-ui - Scroll arrows auto-show via
ResizeObserver+ scroll listener - Hidden scrollbar with
scrollbar-width: none+ webkit pseudo - Badge counts render as
bg-primary/15 text-primaryinline chips
Pattern 02
Static Profile Tabs
Used on profile pages with 2-4 tabs that fit without scrolling. Editorial underline style with uppercase tracking and FontAwesome icons.
About
Professional background, specializations, and partnership preferences. Bio and career summary.
Usage
- Same
BaselTabBarcomponent as scrollable tabs, just fewer items - Best for 2-4 tabs. Allows horizontal swipe on narrow screens to prevent overflow
Pattern 03
Scrollable Settings Tabs
Mid-count tabs (4-6) that may overflow on smaller screens. Same scrollable pattern as detail tabs, without badge counts.
General Settings
Account preferences, display name, timezone, and language configuration.
Pattern 04
Vertical Sidebar Tabs
Settings-style layout with sidebar navigation. Stays vertical on all breakpoints with border-left accent on the active item.
General Settings
Account preferences, display name, timezone, and language configuration.
Usage
- Use
BaselVerticalTabBarfrom@splits-network/basel-ui - Active indicator is
border-l-4 border-primary - Sidebar stacks above content on mobile, side-by-side on
sm:and up - Best for full-page settings and account pages with 4+ sections
Reference
Which Pattern to Use
| Tabs | Pattern | When |
|---|---|---|
| 2-3 | Static Profile | Profile pages, simple detail views |
| 4-6 | Scrollable | Settings, mid-complexity features |
| 6+ | Scrollable + Badges | Detail panels, admin views |
| 4+ | Vertical Sidebar | Full-page settings, account pages |