Sidebar Topics

About this block

Sidebar Topics splits the FAQ section into two columns. The narrow left column holds a vertical topic navigation list where each row shows a topic name and a question count, with the active topic highlighted by a muted background. The wider right column renders a flat definition list of questions and answers separated by hairline dividers, one entry per row with a bold question above a short prose answer.

Each topic in the sidebar and each Q&A entry in the content area are independent items, so you can add or remove topics, adjust the counts, and swap in any set of questions without touching the surrounding layout. The heading and lede above the grid are also standalone copy that can be rewritten freely.

When to use

Use this layout when your help content spans several distinct topics and you want learners to navigate by subject rather than scroll through a single undivided list. On an online education platform it works well for a course FAQ page where students may only care about enrollment, billing, or certificate questions, and topic counts signal at a glance how much is covered in each area. Compared to a pure accordion, the sidebar approach makes the topic structure visible before a user reads a single answer.

A natural flow around it on a Marketing Pro page:

Before

• A hero section to establish context before visitors reach the help center
• Pricing so readers arrive at FAQs with a plan in mind and billing questions already framed

After

• A CTA block to direct readers who still have questions toward a contact or signup action
• With CTA Banner if you prefer to keep the support prompt inside the FAQ section itself

What you can customize

The two columns work independently, so most changes are localized to one side or the other:

• Topic list. Add, remove, or rename topic rows and update the counts to reflect your actual content categories.
• Active state. Only one topic is highlighted at a time in the demo; wire the nav to a state toggle to make the sidebar interactive.
• Q&A entries. Swap in any number of question and answer pairs; the divider list grows or shrinks automatically with no layout changes.

Tip: keep topic names short enough to fit on one line in the sidebar so counts stay right-aligned and the column stays narrow.