Tab navigation components for organizing content into separate sections.
Tabs as Card Header (Same Height)
Normal Card
This is a regular card with a header. The header has a min-height of 40px.
Tabs replace the header using pa-tabs__container--card. The tabs row has the same height (40px) as a card header. Overflow tabs are in the dropdown menu.
Details content.
Settings content.
History content.
Logs content.
Audit Trail content.
Permissions content.
Card Tabs (Built-in)
Overview
Card tabs integrate seamlessly.
Details
Detailed information goes here.
Settings
Configuration options here.
Reports
Analytics data displayed here.
Standalone Tabs
Home
Standalone tabs work anywhere.
Profile
User profile information here.
Messages
Messages and conversations.
Settings
Application settings here.
Tabs with Icons
Home with icons.
Profile with icons.
Messages with icons.
Settings with icons.
Fixed Width Tabs
minwr-{n} / wr-{n} / maxwr-{n} (rem width) on a tab item — n = 1–10, 15, 20…50. minwr-* sets a floor (short labels align, long ones still grow); wr-* pins an exact width.
Min-width 6rem (minwr-6)
Fixed width tabs maintain consistent sizing.
Edit content here.
Delete operations here.
Min-width 8rem with icons (minwr-8)
Dashboard data.
Analytics data.
Wrap Labels (multi-line titles)
--full stretches the short tabs into dead space,
and plain auto width leaves the long one huge and the edge ragged.
pa-tabs--wrap-labels lets the long title wrap; cap it with
maxwr-* to choose the wrap point. The row then keeps every tab as tall
as the wrapped one — no zig-zag — via the flex row's default
align-items: stretch.
Default (auto width, no wrap) — ragged, long tab dominates
Orders content.
Invoices content.
Delivery sheets content.
Complaints content.
With pa-tabs--wrap-labels + maxwr-15 on the long tab — tidy, level
Orders content — the long tab wraps to two lines; the short tabs stretch to match its height.
Invoices content.
Delivery sheets content.
Complaints content.
Per-Tab Width — Real-World Example
minwr-* floor so the
short ones stop looking cramped, and cap the long one with maxwr-* (plus
pa-tabs--wrap-labels so it wraps) — the row then stays tidy and level.
Floor every tab at 8rem (minwr-8), cap + wrap the long one (maxwr-15)
User
Account holder details.
Order
Order summary and line items.
Invoice
Billing and payment status.
Packages
Parcels in this shipment.
Deliveries and returns
Tracking, delivery attempts and returns — the long tab wraps to two lines while the short tabs hold their 8rem floor and stretch to match its height.
Prefer one line? Drop --wrap-labels and let the long tab grow past the floor
Same 8rem floor, no cap — the four short tabs are uniform and only “Deliveries and returns” grows to fit its text.
Order.
Invoice.
Packages.
Deliveries and returns.
Center the label inside each tab — add justify-content-center to the item
Same floored tabs, but the label is centered within each tab instead of start-aligned.
Order.
Invoice.
Packages.
Deliveries and returns.
minwr-*/wr-*),
the label is start-aligned by default. Add the justify-content-center utility
— the tab item is a flexbox — to center it (or justify-content-end to
end-align). That utility ships in @keenmate/pure-css. It is not the same as
pa-tabs--centered, which centers the whole tab group within the bar rather than the
label inside each tab.
Pills Style Tabs
Dashboard
Key metrics overview.
Analytics
Detailed insights.
Reports
Generated summaries.
Pills with Icons
Dashboard pills.
Analytics pills.
Reports pills.
Vertical Tabs
Account Settings
Manage your account information and preferences.
Security Settings
Configure password and two-factor authentication.
Notification Preferences
Control how and when you receive notifications.
Appearance Options
Customize the look and feel of your interface.
Boxed Tabs
Code repository and file browser.
Issue tracker and bug reports.
Pull request reviews and merges.
Vertical Tabs — Minimum Rail Width
By default the vertical tab rail sizes to its content, so short labels make a narrow column.
Add a min-width utility to .pa-tabs--vertical to keep the rail a consistent width —
handy for settings-style navigation. Here the rail uses minwr-20
(min-width: 20rem); swap for minwr-15 / minwr-25 to taste,
or minw-25 for a percentage. These utilities ship in @keenmate/pure-css.
Profile
The rail stays at least 20rem wide no matter how short the labels are.
Privacy
Short labels no longer collapse the tab column to a cramped width.
Integrations
Pair with maxwr-* to also cap the rail, or drop the min-width to let it hug content.
Tab Sizes
Small Tabs
Small tabs content - compact and space-efficient.
Small tabs - Tab 2
Small tabs - Tab 3
Default Tabs
Default size tabs content - standard spacing.
Default tabs - Tab 2
Default tabs - Tab 3
Large Tabs
Large tabs content - more generous spacing.
Large tabs - Tab 2
Large tabs - Tab 3
Tabs with Badges
All items (48 total).
Active items (12 items).
Pending items (5 items).
Closed items (31 items).
Centered Tabs
Feature highlights and capabilities.
Pricing plans and options.
Customer testimonials and reviews.
Full Width Tabs
Mobile view and responsive design.
Tablet view and layout.
Desktop view and features.
Border Top Tabs
Active indicator on top instead of bottom. Useful for profile panels and similar UI patterns.
Favorites content here.
Settings content here.
Border Top + Full Width
Combines --border-top with --full for equal-width tabs with top indicator.
Favorites panel content.
Icon-Only Tabs - Horizontal
Dashboard
Icon-only tabs save space.
Analytics
Analytics data here.
Users
User management here.
Settings
Settings here.
Icon-Only Tabs - Vertical
Home
Vertical icon-only tabs with centered icons.
Profile
Profile settings.
Messages
Message inbox.
Settings
Application settings.
Standalone Tabs - No Card Required
Overview Section
Tabs can exist outside of cards for page-level navigation. Each tab can contain cards or any other content.
Details Section
This pattern is useful for organizing page content into sections.
Reports Section
The tab content can include multiple cards or complex layouts.
Standalone Vertical Tabs
Dashboard
Vertical tabs work great for sidebar-style navigation outside of cards.
Analytics
Analytics content goes here.
Users
User management content here.
Inline Tabs in Header (Same Height Alignment)
Card with Title + Inline Tabs
Inline tabs sit in the header row, so this card has the same header height as the card next to it.
Pending items content.
Closed items content.
Regular Card (Header Only)
This card has no tabs - just a header. Notice how both card headers align perfectly when side by side.
Use pa-card__tabs--inline when you need cards with tabs to match the height of cards without tabs.
Tabs can also be used alone in the header without a title.
Details content.
Settings content.
Summary Stats
Cards with different header content still align because inline tabs use the same header height.
Bordered Tabs - Card-Like Wrapper
Dashboard
Bordered tabs wrap the entire tab system in a card-like border. The content has no separate border - it's all unified.
Settings
This pattern works well for standalone tabs that need visual separation from the page background.
Profile
Use pa-tabs__container--bordered wrapper for horizontal tabs.
Bordered Vertical Tabs
Overview
Bordered vertical tabs create a unified card-like appearance.
The border wraps both the tab navigation and content area with a divider between them.
Reports
Perfect for sidebar-style navigation that needs to stand out.
Settings
Use pa-tabs__vertical-layout--bordered modifier for vertical tabs.
Long Tab Titles in Constrained Space
Default (Wrap)
Default behavior - tabs wrap to multiple lines when needed.
User Management System content.
Reports & Analytics content.
Settings & Configuration content.
Collapse Modifier
Collapse mode - inactive tabs show only icons, active tab shows full title.
User Management content.
Reports content.
Settings content.
Scrollable Modifier
Scrollable tabs with pa-tabs--scrollable modifier - click arrows to scroll.
User Management content.
Reports content.
Settings content.
Scrollable Tabs - Full Width Demo
Scrollable Pills
Dashboard Overview - arrows appear when tabs overflow the container.
Organizations Tree content.
User Management content.
Reports content.
Settings content.
Security content.
Audit logs content.
CSS Classes Reference
Tabs Base
pa-tabs- Base tabs containerpa-tabs__item- Individual tab buttonpa-tabs__item--active- Active tab statepa-tabs__content- Content wrapperpa-tabs__panel- Tab panel (hidden by default)pa-tabs__panel--active- Active/visible panel
Tab Styles
pa-tabs--pills- Rounded pill-style tabspa-tabs--boxed- Boxed tabs with backgroundpa-tabs--vertical- Vertical tab layoutpa-tabs--border-top- Active indicator on top
Tab Modifiers
pa-tabs--sm- Small sizepa-tabs--lg- Large sizepa-tabs--centered- Center-aligned tabspa-tabs--full- Full width (equal-width tabs)pa-tabs--nowrap- Prevent wrappingpa-tabs--collapse- Icon-only until activepa-tabs--scrollable- Horizontal scroll with arrows
Scrollable Tabs Elements
pa-tabs__scroll-container- Scrollable inner containerpa-tabs__scroll-btn- Scroll arrow buttonpa-tabs__scroll-btn--start/--end- Arrow directionpa-tabs__scroll-btn--visible- Show arrow
Container Wrappers
pa-tabs__container--bordered- Card-like border wrapperpa-tabs__container--card- Tabs as card headerpa-tabs__vertical-layout- Vertical tabs + content wrapperpa-tabs__vertical-layout--bordered- Bordered vertical layout
Overflow Menu (Card Header)
pa-tabs__overflow- Overflow containerpa-tabs__overflow-toggle- Overflow buttonpa-tabs__overflow-toggle--has-active- Active tab in overflowpa-tabs__overflow-menu- Dropdown menupa-tabs__overflow-menu--open- Open state