Menu widget - "Show page headings" - indentation missing for several header levels

[AnRei123]

The "Show page headings option" is really great. We use it on our pages to create a table of contents on the top of each page that shall lists and links all headers or of at least header level 1 and header level 2 on each page.

Bug description

But unfortunately, in the DevPortal this feature is very limited. If you select a span of more than one header levels than on the top of the page where we use the widget appears a flat hyperlink list like the following:

• Header 1 - level 1
• Header 1 - level 2
• Header 2 - level 2
• Header 2 - level 1
• Header 3 - level 1
• Header 1 - level 2
• Header 2 - level 2

This is not usable at all and very confusing to the reader if the header levels are not properly indented.

Expected behavior

But the expected behavior is that the headers of the different header levels are left aligned and indented according to their level. But I was not able to adapt the styles of the menu widget on the styles page nor configure the menu widget on the page to get the header levels indented like the following:

• Header 1 - level 1

• Header 1 - level 2
• Header 2 - level 2

• Header 2 - level 1
• Header 3 - level 1

• Header 1 - level 2
• Header 2 - level 2

We like to use it similar to the TOC approach that is supported on the Azure wiki pages.

It is essential to provide a more granular TOC with indented header levels if the page is lengthy and if you do not expect the user to scroll through the whole sub section to find the proper information. And it is essential to figure out before scrolling through an article how the article is structured and which content I can expect.

[ghost]

@AnRei123, thank you for opening this issue. We will triage it within the next few business days.

[azaslonov]

Makes sense, we'll add required options.

[FXZFun]

I've been looking for this feature as well. Is there any update on the implementation progress?