Azure / Azure/api-management-developer-portal

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

Open
#1,266 3 comments 0 reactions 0 assignees View on GitHub
(t) Bug (u) Usability P1
Dominant language
TypeScript
Stars
545
Forks
360
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the Menu widget and its "Show page headings" option; inspect how selected heading levels are rendered and how styles are applied. Done means headings remain linked while lower levels are visibly indented according to their level, matching the expected nested examples; verify on a page containing multiple heading levels.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.