HubSpot Marketplace Module

Content Tabs Pro for HubSpot CMS

Horizontal, Vertical & Pill Tabs with Rich Content, Mobile Accordion & Deep Linking

Three tab styles — horizontal with animated underline, vertical sidebar, and rounded pill buttons. Each tab holds a full rich text content area with headings, lists, tables, images, videos, and embedded HubSpot forms. Auto-converts to accordion on mobile. URL deep linking. 60+ style controls.

Get the Module arrow_outward Works with any HubSpot CMS theme · Pure vanilla JavaScript · $14.99
Content Tabs Pro module for HubSpot CMS showing horizontal tabs with rich content areas

Everything you need in a tabbed content module

view_column

Three Tab Styles

Horizontal tabs with animated underline for product features and general content. Vertical sidebar tabs for documentation with six or more sections. Pill tabs with rounded buttons for filter-style interfaces. Switch styles from the editor without rebuilding content.

article

Rich Content Areas

Each tab holds a full rich text content area supporting headings, lists, tables, images, videos, blockquotes, code blocks, and embedded HubSpot forms. No character limits. Content renders exactly as authored in the HubSpot editor.

smartphone

Mobile Accordion

Below the configurable breakpoint (default 768px), tabs convert to an accordion layout with smooth height animation. Deep-link state is maintained across both layouts. Visitors on mobile get a native-feeling expand and collapse interaction.

link

URL Deep Linking

When a visitor clicks a tab, the URL updates with the active tab index. Shared links open the page with the correct tab selected automatically. Bookmarks and internal links work without custom JavaScript.

contact_mail

Embedded Form Styling

19 dedicated styling controls for embedded HubSpot forms. Customize input backgrounds, borders, focus rings, label colors, placeholder text, submit button styles, and error states. Forms match your design without writing CSS.

animation

Content Animations

Three content transition animations: fade, slide, and none. Animation duration is configurable. Tab switching feels smooth and intentional. Respects prefers-reduced-motion by disabling all transitions when the visitor has that setting enabled.

accessibility

Accessible by Default

Semantic HTML with ARIA tablist, tab, and tabpanel roles. Arrow key navigation between tabs. Focus-visible outlines. Screen readers announce tab labels and panel content. Keyboard users can navigate the full component without a mouse.

palette

60+ Style Controls

Tab colors, active and hover states, underline thickness, font family and size, content padding, background colors, border radius, box shadows, accordion icon styling, responsive breakpoint, and animation speed. Light, dark, or branded designs without CSS.

What you can build

Content Tabs Pro works for any content that benefits from organized sections. Here are four ways teams use it.

Product feature breakdown

One tab per feature with screenshots, descriptions, and embedded demo videos. Horizontal style with animated underline. Visitors explore features at their own pace. Deep links let you send prospects directly to the feature that matters to them.

Documentation hub

Vertical sidebar tabs for API docs, setup guides, and FAQs. Each tab holds structured content with code blocks and tables. URL deep linking lets support teams link to specific sections. Mobile accordion keeps everything accessible on smaller screens.

Service packages

Pill tabs for Basic, Professional, and Enterprise tiers. Each tab shows a detailed breakdown of what is included, pricing, and a HubSpot form for requesting a quote. Form styling controls ensure the form matches the surrounding design.

Multi-step process

Horizontal tabs labeled Step 1, Step 2, Step 3 to walk visitors through an onboarding flow, application process, or implementation timeline. Rich content areas hold detailed instructions, images, and checklists for each step.

Works with any HubSpot theme

Content Tabs Pro is a standalone module. Install it in any HubSpot CMS portal and drop it on any page including website pages, landing pages, and blog posts. No theme dependency, no jQuery, no external libraries. Pure vanilla JavaScript.

Questions

Does it convert to an accordion on mobile?

add
Yes. Below the configurable breakpoint (default 768px), tabs convert to an accordion layout with smooth height animation. Deep-link state is maintained across both layouts.

Can I embed HubSpot forms inside tabs?

add
Yes. Each tab holds a full rich text content area that supports embedded HubSpot forms. There are 19 dedicated styling controls for form inputs, borders, focus states, and submit buttons.

Does it support URL deep linking?

add
Yes. When a visitor clicks a tab, the URL updates with the active tab index. Shared links open the page with the correct tab selected automatically.

Do you offer support?

add
Yes. Documentation included, plus email support for setup and customization questions. Response time is within 5 business days.

Organize your content with Content Tabs Pro

The most flexible tabbed content module on the HubSpot Marketplace. Three tab styles, rich content areas, mobile accordion, URL deep linking, embedded form styling, and 60+ style controls.

Get the Module arrow_outward

Related modules: FAQ Pro · Changelog Pro · Comparison Matrix Pro · All Modules