diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts
index 74d11aeb..9e833eb8 100644
--- a/src/services/MarkdownRenderer.ts
+++ b/src/services/MarkdownRenderer.ts
@@ -41,9 +41,13 @@ export class MarkdownRenderer {
     this.headingEnhanceRenderer.heading = this.headingRule;
   }
 
-  saveHeading(name: string, container: MarkdownHeading[] = this.headings): MarkdownHeading {
+  saveHeading(
+    name: string,
+    container: MarkdownHeading[] = this.headings,
+    parentId?: string,
+  ): MarkdownHeading {
     const item = {
-      id: 'section' + '/' + slugify(name),
+      id: parentId ? `${parentId}/${slugify(name)}` : `section/${slugify(name)}`,
       name,
       items: [],
     };
@@ -95,7 +99,11 @@ export class MarkdownRenderer {
         `<a class="share-link" href="#${id}"></a>${text}</h${level}>`
       );
     } else if (level === 2) {
-      const { id } = this.saveHeading(text, this.currentTopHeading && this.currentTopHeading.items);
+      const { id } = this.saveHeading(
+        text,
+        this.currentTopHeading && this.currentTopHeading.items,
+        this.currentTopHeading && this.currentTopHeading.id,
+      );
       return (
         `<a name="${id}"></a>` +
         `<h${level} ${SECTION_ATTR}="${id}" id="${id}">` +
diff --git a/src/services/models/Group.model.ts b/src/services/models/Group.model.ts
index 45b76359..d2a8d658 100644
--- a/src/services/models/Group.model.ts
+++ b/src/services/models/Group.model.ts
@@ -2,6 +2,7 @@ import { action, observable } from 'mobx';
 import slugify from 'slugify';
 
 import { OpenAPIExternalDocumentation, OpenAPITag } from '../../types';
+import { MarkdownHeading } from '../MarkdownRenderer';
 import { ContentItemModel } from '../MenuBuilder';
 import { IMenuItem, MenuItemGroupType } from '../MenuStore';
 
@@ -25,13 +26,18 @@ export class GroupModel implements IMenuItem {
   depth: number;
   //#endregion
 
-  constructor(type: MenuItemGroupType, tagOrGroup: OpenAPITag, parent?: GroupModel) {
-    this.id = type + '/' + slugify(tagOrGroup.name);
+  constructor(
+    type: MenuItemGroupType,
+    tagOrGroup: OpenAPITag | MarkdownHeading,
+    parent?: GroupModel,
+  ) {
+    // markdown headings already have ids calculated as they are needed for heading anchors
+    this.id = (tagOrGroup as MarkdownHeading).id || type + '/' + slugify(tagOrGroup.name);
     this.type = type;
     this.name = tagOrGroup['x-displayName'] || tagOrGroup.name;
     this.description = tagOrGroup.description || '';
     this.parent = parent;
-    this.externalDocs = tagOrGroup.externalDocs;
+    this.externalDocs = (tagOrGroup as OpenAPITag).externalDocs;
 
     // groups are active (expanded) by default
     if (this.type === 'group') {