HTML Template with Tabs — CSS JS UI, $35

Tab UI Variants Included

Horizontal Tabs

Classic Tab Bar

Standard horizontal tab bar with active underline indicator. Switches content panels on click with smooth fade transition.

Pill Tabs

Rounded Pill Style

Background-fill pill tabs with smooth sliding indicator. Popular in modern SaaS dashboards and settings pages.

Vertical Tabs

Sidebar Navigation

Vertical tab list on the left, content panel on the right. Ideal for settings pages, documentation, and multi-section forms.

Icon Tabs

Icon + Label Tabs

Tabs with SVG or emoji icons above the label. Adds visual hierarchy and makes tab purpose immediately recognizable.

Accessibility — Built Into Every Tab Component

ARIA Roles

role="tablist", role="tab", role="tabpanel" and aria-selected on active tab — full WAI-ARIA tab pattern compliance.

Arrow Key Navigation

Left/Right arrow keys cycle through tabs. Up/Down for vertical tabs. Tab key moves focus into the active panel.

Home and End Keys

Home jumps to the first tab, End jumps to the last. Power users navigate your interface as fast as a keyboard shortcut.

Focus Visible Styles

Custom focus ring on each tab — visible for keyboard users, hidden for mouse users with the :focus-visible selector.

Tab Component JavaScript

// Activate a tab by index
function activateTab(tabs, panels, idx) {
  tabs.forEach((t, i) => {
    t.setAttribute('aria-selected', i === idx);
    t.setAttribute('tabindex', i === idx ? '0' : '-1');
    panels[i].style.display = i === idx ? 'block' : 'none';
  });
  tabs[idx].focus();
}
// Arrow key navigation
tabList.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight') activateTab(tabs, panels, (cur+1) % tabs.length);
  if (e.key === 'ArrowLeft') activateTab(tabs, panels, (cur-1+tabs.length) % tabs.length);
});

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

Do UIXDraft templates include tab navigation components?

Yes. The UI component templates include horizontal, pill, vertical and icon tab variants built in pure CSS and vanilla JS — no jQuery or libraries required.

Are the tab components keyboard accessible?

Yes. All tab components follow the WAI-ARIA tab pattern: arrow keys navigate between tabs, Tab key moves into the active panel, Home/End jump to first/last tab.

Can I use the tab component without JavaScript?

CSS-only tabs are possible using radio inputs and the :checked selector. UIXDraft includes both CSS-only and JS-enhanced tab variants.

How do I add a new tab to the component?

Add a new button with role='tab' to the tablist and a corresponding div with role='tabpanel'. The JS initializes automatically from the DOM structure.

Can I style the tabs to match my brand colors?

Yes. Tab colors, active indicator style, and hover states are controlled by CSS custom properties at the top of the component stylesheet.

HTML Templates with Tab Navigation