Looks good

When the menu item wraps to two lines I find the center alignment visually awkward but that might just be me

It works but I am having second thoughts about how I have coded this feature. Perhaps it should be considered a draft for now. I will get on to the points raised by @brianteeman - thank you. Meanwhile, here is a screenshot:

@brianteeman Should I make the copyright 2026 on the assumption it will be next year before it appears?

@brianteeman Should I make the copyright 2026 on the assumption it will be next year before it appears?

no - you wrote it in 2025 and it will hopefully be merged on github in 2025

You could remove the need for the wait() delays if you wanted to.
Will leave this code here incase you want to use it.

document.addEventListener("DOMContentLoaded", function (event) {
  new MetisMenu('#helpmenu', {
    toggle: true
  });

  const helpIndex = document.getElementById('helpmenu');
  if (helpIndex) {
    helpIndex.querySelectorAll('a:not(.has-arrow)').forEach(element => element.addEventListener('click', () => {
      window.scroll(0, 0);
      // Save clicked link data-id
      const id = element.dataset.id;
      if (id) {
        localStorage.setItem('helpIndex.lastClick', id);
      }
    }));
  }

  // Async restore function
  function restoreMenu() {
    let lastClick = localStorage.getItem('helpIndex.lastClick');
    if (!lastClick) {
      lastClick = 'start-here';
    }

    const selectedLink = helpIndex.querySelector(`a[data-id="${lastClick}"]`);
    if (!selectedLink) return;

    // Collect parent list items top-down
    const lists = [];
    let parentLi = selectedLink.closest('li');
    while (parentLi && parentLi !== helpIndex) {
      const parentUl = parentLi.parentElement;
      const parentLiOfUl = parentUl.closest('li');
      if (parentLiOfUl) {
        const li = parentLiOfUl
        if (li) lists.unshift(li);
      }
      parentLi = parentLiOfUl;
    }

    // Trigger clicks in sequence with a delay
    for (const li of lists) {
      li.classList.add('mm-active');
      li.querySelector('ul').classList.add('mm-show');
      li.querySelector('a').setAttribute('aria-expanded', true);
    }

    // Optional: highlight selected link
    selectedLink.classList.add('active');

    // Ensure it's visible and then "click" it
    //selectedLink.scrollIntoView({ behavior: 'smooth', block: 'start' });

    // Give the submenu a moment to fully render before clicking
    selectedLink.click();
  }

  // Run restore after MetisMenu setup delay
  restoreMenu()
});

@C-Lodder only just seen your suggestion - I will give it a try.

@C-Lodder I implemented you suggestion. Next problem: In narrow screens the Help menu starts open and it takes two clicks to close it. I want it to start with the Help menu closed. Also, in narrow screen mode I want the Help menu to close after selecting an item. I am looking in to how to do this - do you have any suggestions?

I am happy! This PR is ready for testing.

@ceford What about these 2 unresolved review comments by @brianteeman ?

• #46355 (comment)
• #46355 (comment)

If they are resolved, please use the button below the comment on GitHub to mark it as resolved.

With the other 2 about the copyright year I've just done that.

Thanks in advance.

@ceford What about these 2 unresolved review comments by @brianteeman ?

* [[6.1] New backend Joomla! Help page #46355 (comment)](https://github.com/joomla/joomla-cms/pull/46355#discussion_r2454333605)

* [[6.1] New backend Joomla! Help page #46355 (comment)](https://github.com/joomla/joomla-cms/pull/46355#discussion_r2454339366)

If they are resolved, please use the button below the comment on GitHub to mark it as resolved.

With the other 2 about the copyright year I've just done that.

Thanks in advance.

Done that! As I am a rare contributor I did not realised that I needed to resolve comments. I also addressed the alignment problem mentioned by Brian

@ceford Thanks. It is not necessarily the author of a PR who has to resolve review comments, it can also be done by the initial reviewer or by a maintainer. But at the end it is good to have them resolved, otherwise GitHub shows a message about unresolved comments which might discourage testers because they might think there will be more changes coming.

There is a snag! The rebase to 6.1 has led to the proxy returning 404 not found pages. For test purposes you can edit configuration.php and set the minor version to 0

public $helpurl = 'https://help.joomla.org/proxy?keyref=Help{major}0:{keyref}&lang={langcode}';

@richard67 as this pr removes the only file in the folder help/en-gb it will result in the packages being created without that folder at all. If the folder is needed for b/c etc then an index.html should be placed in the folder to ensure it is included in packages

@richard67 as this pr removes the only file in the folder help/en-gb it will result in the packages being created without that folder at all. If the folder is needed for b/c etc then an index.html should be placed in the folder to ensure it is included in packages

@brianteeman I have no idea if that folder is needed for b/c and if so, if it is needed in a new install of the core, too, or only should be kept on updates.

@ceford Do you have an idea if that cold be needed e.g. for 3rd party extensions?

if it is not needed then entire folder tree can be removed

if it is not needed then entire folder tree can be removed

Looks like it is used in libraries/Src/Help/Help.php (line 71 ff) so I will create administrator/help/en-GB/index.html

That code is the cod3 you were looking for the other week for how to create a help button and link for your own extension

I adjusted the padding. Current rendering:

I have asked Harald to adjust the Help proxy server so it delivers pages for J6.1 and I have put in a PR to adjust the delivered page Toc to no more than 50% width, needed for narrow screens. Both pending.

can you look at the background please

your menu

main menu

can you look at the background please

I have noticed another background colour problem too. I am working on it.

@ceford Could you fix the CSS code style issue reported here by the linter? https://github.com/joomla/joomla-cms/actions/runs/18806977533/job/53662595619?pr=46355

build/media_source/com_admin/css/admin-help.css
  62:3  ✖  Expected "font-weight" to come before "color"  order/properties-order

✖ 1 problem (1 error, 0 warnings)
  1 error potentially fixable with the "--fix" option.

@ceford Now we have CSS and PHP code style errors. Please check https://github.com/joomla/joomla-cms/actions/runs/18822216136/job/53699529076?pr=46355 and https://github.com/joomla/joomla-cms/actions/runs/18822216136/job/53699495439?pr=46355 .

@ceford Now we have CSS and PHP code style errors. Please check https://github.com/joomla/joomla-cms/actions/runs/18822216136/job/53699529076?pr=46355 and https://github.com/joomla/joomla-cms/actions/runs/18822216136/job/53699495439?pr=46355 .

I am still working on the css and js, trying to get the balance between appearance and action just right. I will comment when I think I have it right and the automatic tests are passing.

@richard67 could I ask for some guidance on this problem:

1 | WARNING | A file should declare new symbols (classes, functions,
| | constants, etc.) and cause no other side effects, or it should
| | execute logic with side effects, but should not do both. The
| | first symbol is defined on line 30 and the first side effect is
| | on line 19.

Line 19 includes a PHP array named $menu. On line 30 that array is passed to a function that calls itself recursively. The code works so I don't know exactly what to do.

The css problems will be fixed on the next submit. Is there documentation on how to run these tests before I submit a PR?

@ceford The PHPCS issue could possibly be fixed by moving the // phpcs:enable PSR1.Files.SideEffects from line 16 to below line 19, so you get:

// phpcs:disable PSR1.Files.SideEffects
\defined('_JEXEC') or die;

// Include the $menu as a php array.
include __DIR__ . '/toc-src.php';
// phpcs:enable PSR1.Files.SideEffects

The commands to execute the code style checks can be found in file https://github.com/joomla/joomla-cms/blob/6.1-dev/.github/workflows/ci.yml.

For the 2 PHP CS checks:

php-cs-fixer fix -vvv --dry-run --diff
phpcs --extensions=php -p --standard=ruleset.xml .

For CSS and JS CS checks:

npm run lint:css
npm run lint:js

For the CSS linter you can add -- --fix to the command line, then it will fix what can be fixed automatically:

npm run lint:css -- --fix

I hope this helps.

@ceford It seems my suggestion for the PHP CS was not sufficient. Maybe it works if you move the // phpcs:enable PSR1.Files.SideEffects further down to below line 27? If that also doesn't help, remove that line // phpcs:enable PSR1.Files.SideEffects completely.

I recoded toc-build.php with some help from ChateGPT. So it looks like we are ready for testing!

Have you tested in non english languages?

I tried dutch and although the menu is in dutch the content is all in english.

Have you tested in non english languages?

I tried dutch and although the menu is in dutch the content is all in english.

Before you asked - No, but I was not expecting a problem as the logic is based on en-GB but the menu output uses the appropriate language file. After you asked - Yes, and it works as I expected. The content being in English is the default behaviour of the proxy - if a translation is not available the English version is delivered.

Have you tested in non english languages?

I tried dutch and although the menu is in dutch the content is all in english.

Can you give me a specific page to look at? Anything that appears in the iframe comes from the proxy help server. It should not be affected by the help menu.

Sorry my bad. The content I checked was not translated

When the sidebar main menu is collapsed it messes with the background on the help menu

Not sure what went wrong - I tested collapsing the sidebar quite often. There is one problem I have not addressed: on change of viewport the page needs a manual reload. Not sure what I should do about that!

Bit the bullet and did it!

This PR is ready for testing!

I have no idea why Some checks were not successful! It does not seem to be related to the code changes in my PR.

@ceford I installed it from your branch and basically it works well and also clicking on links works fine. I tested it on a desktop pc with a usual wide screen. What I noticed was, if the help page has a lot of content (e.g. Start Here > Licence) then there are two scrollbars displayed on the right and therefore scroll to Top (clicking on the "Top" in the bottom of the help content) only scrolls up to the inner top. The same issue on smaller screens. on other help pages (e.g. Privacy > Privacy Options) when I click on the "Top" link then nothing happens. The reason for that might be that the inner page doesn't have a scrollbar, only the outher area has a scrollbar. Might it be possible to optimize it?

Do you know why there is a big empty area in the help page screen at the bottom? It seems to be that the iframe has a fixed height="2100px". Would it be possible to fit by content?

By the way: In my opinion, the new menu shouldn't be styled exactly like the main menu, as it's rather confusing if it looks the same. It could also be without background color. That's just my opinion. I was not involved in the idea- and development process.
Would a quick solution be to collapse the main menu automatically when the help page is opening?

Dark mode is another thing: Currently the help pages does not support dark mode, right? But the help menu does and there is a small styling issue with it. When I expand the menu and click on a sub item then all items of that sub-level are highlighted and therefore one can not see exactly which page is displayed. As an example, in the screenshot below I clicked: Start Here > Start Here (in German: Start > Start).

Language translations: I installed as second language German and I changed my backend user language to German. When I open the help then some content is in English and some is in German. Im pretty sure this is because not everything is translated yet, right? And which has nothing to do with this PR, right?

Thank you for your test and comments as a result of which I have made one change. My responses:

@ceford I installed it from your branch and basically it works well and also clicking on links works fine. I tested it on a desktop pc with a usual wide screen. What I noticed was, if the help page has a lot of content (e.g. Start Here > Licence) then there are two scrollbars displayed on the right and therefore scroll to Top (clicking on the "Top" in the bottom of the help content) only scrolls up to the inner top. The same issue on smaller screens. on other help pages (e.g. Privacy > Privacy Options) when I click on the "Top" link then nothing happens. The reason for that might be that the inner page doesn't have a scrollbar, only the outher area has a scrollbar. Might it be possible to optimize it?

There is not much I can do abut this - it is the normal behaviour of an iframe. The outer scroll bars are present if the frame has a height greater than the screen. The inner scroll bar is present if the iframe content height is greater than the iframe. This will always be so for some screen screens. The Top link problem is in the content of the iframe so nothing I can do about that in this PR.

Do you know why there is a big empty area in the help page screen at the bottom? It seems to be that the iframe has a fixed height="2100px". Would it be possible to fit by content?

The frame height could be set to the viewport height using css but when you select a menu that has many subitems the menu can become much longer than the iframe. So this needs some experimentation. I don't know why 2100px was chosen originally. Maybe someone can enlighten us.

By the way: In my opinion, the new menu shouldn't be styled exactly like the main menu, as it's rather confusing if it looks the same. It could also be without background color. That's just my opinion. I was not involved in the idea- and development process. Would a quick solution be to collapse the main menu automatically when the help page is opening?

I don't disagree. But experimentation with colour schemes is a tedious chore that I don't have to do. And there is the Atum colour hue to deal with. Below is a screenshot with the hue set to green and also showing the other two problems referred to in this discussion.

Dark mode is another thing: Currently the help pages does not support dark mode, right? But the help menu does and there is a small styling issue with it. When I expand the menu and click on a sub item then all items of that sub-level are highlighted and therefore one can not see exactly which page is displayed. As an example, in the screenshot below I clicked: Start Here > Start Here (in German: Start > Start).

Yes - that was a mistake on my part and I have corrected it.

Language translations: I installed as second language German and I changed my backend user language to German. When I open the help then some content is in English and some is in German. Im pretty sure this is because not everything is translated yet, right? And which has nothing to do with this PR, right?

True. There are new strings to translate but they won't be available until this PR is merged.

I have tested this item ✅ successfully on 44324e6

I tested it on a Windows Desktop computer with a normal wide screen. It looks good. If the open help page is larger than the browser window, two vertical scroll bars may appear, which is somewhat inconvenient.