Hire me on Upwork

Setup & Configuration

Sticky Sidebar with Accordion Setup Guide

Install the module from the HubSpot Marketplace, add repeatable content sections, and publish a sticky navigation sidebar — no custom code required.

HubSpot CMS Version 1.1 Long-form · FAQ · Docs

Getting Started

Install Sticky Sidebar with Accordion from the HubSpot Marketplace, then add it to any supported page type.

  1. Open the HubSpot Marketplace and search for Sticky Sidebar with Accordion by Chetan Kumar.
  2. Click Install and select the HubSpot account where you want to use the module.
  3. After installation, the module appears in the page editor under your installed marketplace modules.
  4. Create or edit a website page, landing page, or blog post that supports drag-and-drop modules.

TipThe module supports website pages, landing pages, blog posts, and blog listing templates.

Add to a Page

Drag the module into your layout and build sections from the editor sidebar.

  1. In the HubSpot page editor, open an existing page or click Create → Website page.
  2. Click + Add in the left sidebar and search for Sticky Sidebar with Accordion.
  3. Drag the module into a column or section on your page.
  4. In the Content tab, add sections with rich text headings and body content. Each heading becomes a sidebar link — style headings with any tag, color, or format.
  5. Optionally enable the block above navigation for contact details or a short CTA.
  6. Open the Styles tab to adjust sidebar width, colors, and scroll offsets.
  7. Click Publish or Update to make changes live.

NoteScroll the live preview page to test active section highlighting before publishing.

Content Tab

Sidebar options and repeatable content sections live under Content.

Field Tab Description
Show block above navigation Content Toggle to display optional rich text (e.g. contact email, phone, or help text) above the sidebar navigation links.
Navigation label Content Text shown above the sidebar links (default: On this page). Hidden on mobile when accordion navigation is enabled.
Show section count Content Toggle the section count label beside the navigation title on desktop.
Section count label Content Editable label text. Use {count} for the number of sections — e.g. "{count} sections", "{count} topics", or any custom wording.
Block content Content Rich text shown at the top of the sticky sidebar when the toggle above is enabled.
Content sections Content Repeatable group. Add one row per section on your page.
Section heading Content Rich text heading in the content card — use any heading level (H1–H6), color, bold, or links. Plain text from this field is used in the sidebar navigation.
Section content Content Rich text body for the section — supports lists, links, and formatting.
Collapsible section Content When enabled, visitors can expand or collapse this section's body. The entire heading row is clickable.
Start collapsed Content Only applies when Collapsible section is on. Section body is hidden until the visitor expands it.
Custom ID / Class / CSS Content Advanced options under the Advanced group for developers who need a custom HTML id, CSS class, or scoped CSS.

Styles Tab

Customize layout, sidebar appearance, and spacing without custom CSS.

Field Tab Description
Style preset Styles Futuristic Glass (default), Minimal Light, or Bold Dark (Futuristic). Quick starting point — individual controls below can override.
Sidebar width (%) Styles Width of the sticky sidebar column on desktop. Content fills the remaining space.
Sticky top offset (px) Styles Distance from the top of the viewport when the sidebar becomes sticky. Increase if your site has a fixed header.
Scroll anchor offset (px) Styles Extra space above a section when clicking sidebar links, so headings are not hidden behind a fixed header.
Border color Styles Sidebar and accent border color. Inherits theme primary color by default. Defaults to HubSpot orange when no theme color is set.
Panel background Styles Sidebar panel fill color and opacity. Lower opacity enhances the glass effect on the Futuristic Glass preset.
Border radius Styles Round the corners of the sidebar navigation box and content cards.
Navigation link color Styles Default color for sidebar section links.
Active link color Styles Color for the currently active section link while scrolling.
Section numbers Styles Show numbered badges beside sidebar links and content card headings.
Mobile accordion navigation Styles On mobile and tablet, collapse navigation into a full-width expandable panel above content.
Sticky navigation on mobile Styles Keep the navigation panel fixed at the top while scrolling on mobile/tablet. Off by default.
Reveal sections on scroll Styles Fade and slide content cards into view as visitors scroll. Respects reduced-motion preferences.
Spacing Styles Desktop and mobile padding/margin around the module.

Theme colorsBorder color inherits your theme primary color automatically for a native look on any HubSpot theme.

Layout Tips

Fine-tune offsets and section count for the best reader experience.

Field Tab Description
Fixed headers Layout If your theme uses a sticky site header, increase Sticky top offset and Scroll anchor offset so links and headings align correctly.
Long pages Layout Use 4–8 sections for FAQs and documentation. Very short pages may not need sticky navigation.
Mobile Layout On viewports under 992px the sidebar becomes full-width and stacks above content. Enable Mobile accordion navigation for a compact toggle panel.
Collapsible sections Layout Use Collapsible section per row for FAQ-style pages. Combine with Start collapsed so only one or two sections are open by default.
Rich text headings Layout Default section heading is H3. Change to any heading level or custom styling in the rich text editor — sidebar always shows plain text.

FAQ & Troubleshooting

Common questions about setup, scrolling, and styling.

  • Sidebar links do not scroll to the right section.

    Increase Scroll anchor offset in the Styles tab if headings hide behind a fixed header. Republish after saving.

  • The active link does not update while scrolling.

    Ensure each section has a heading and enough content to scroll. The scroll spy runs on the main page scroll — avoid nesting the module inside overflow:hidden containers.

  • Can I add more than one module on the same page?

    Yes. Each instance has independent sections, sidebar settings, and unique anchor IDs.

  • How do I change sidebar colors?

    Open Styles → Sidebar navigation. Border color inherits theme primary color; link and active colors can be set manually.

  • Does it work on blog posts?

    Yes. The module supports website pages, landing pages, blog posts, and blog listing templates.

  • Do I need to set manual anchor IDs?

    No. Section headings automatically become sidebar links with generated anchor targets.

  • Can I style section headings differently per section?

    Yes. Section heading is a rich text field — use any heading tag, color, bold, or links. Editor formatting is preserved in the content card; the sidebar shows plain text only.

  • Mobile sidebar link does not scroll to the section.

    Republish after saving. If using Sticky navigation on mobile, increase Scroll anchor offset. Collapsed sections auto-expand when a sidebar link is clicked.

Support & Resources

Live demo, email support, and author resources.

Live preview See Sticky Sidebar with Accordion in action Interactive demo with scroll spy, section navigation, and contact block example. Support Email support Questions about setup, styling, or compatibility. Author Chetan Kumar — HubSpot CMS Developer More modules, templates, and freelance services.

Sticky Sidebar with Accordion

Free HubSpot CMS Module — built for marketers, by Chetan Kumar

Setup documentation · Sticky Sidebar with Accordion · Last updated June 2026