Menu Navigation Click Area Too Small (Only Arrow is Clickable)

[danbaruka]

Description

The sidebar navigation menu currently allows interaction only through the arrow icon on the right side of each menu item.

Clicking on the menu text itself does not trigger any action (such as opening a page or expanding a submenu). This creates confusion for users because the menu item visually appears clickable.

From a UX perspective, users expect the entire menu row (text + arrow) to be clickable.

Problem

• Only the arrow icon responds to clicks.
• Clicking the menu label text does nothing.
• This makes the interface feel broken or unresponsive.
• Users may think the menu is not working.

Expected Behavior

The entire menu item area should be clickable.

This includes:

• The menu text
• The arrow icon
• The full horizontal row

Clicking anywhere on the row should:

• Open the page if it is a link
• Expand/collapse the submenu if it contains nested items

Suggested Fix

Make the entire menu row clickable by attaching the click event to the container element instead of only the arrow icon.

[LeonhardHoffmann]

Hey, do you still need help on this one?

[danbaruka]

Yes. If you’d like to work on it, feel free to go ahead. Thanks!

[LeonhardHoffmann]

Hey @danbaruka, i had a look on it. Can you tell me at which position the sidebar items are mapped? Are they just implemented in the .md files?

[danbaruka]

Sidebar items are not defined in the .md files. They come from:
website/sidebars.ts. The sidebar is autogenerated from the docs tree: tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], so the structure follows the folder layout under website/docs/.
_category_.json / _category_.yml. In each folder (e.g. website/docs/working-group/_category_.yml) these set the label, position, and optional link for that category.

The .md files are the documents that become links in that structure; they don’t define the sidebar mapping.

[LeonhardHoffmann]

Sidebar items are not defined in the .md files. They come from: website/sidebars.ts. The sidebar is autogenerated from the docs tree: tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], so the structure follows the folder layout under website/docs/. _category_.json / _category_.yml. In each folder (e.g. website/docs/working-group/_category_.yml) these set the label, position, and optional link for that category.

The .md files are the documents that become links in that structure; they don’t define the sidebar mapping.

Okay, alright. Im in my 9 to 5 until afternoon but afterwards i will have a look on this