Navigation improvements

[emteknetnz]

I've noticed some potential areas for improvement with the website nav:

Left hand nav

First level nav sections are always expanded

The left hand nav starts with all first level navs sections expanded, and there's no way to collapse them. On my desktop screen the total size there is about 2.5 screen height worth of nav, meaning I need to scroll to see the top level sections down the bottom

Recommend that first level sections start collapsed and auto expand when clicking on them

First level nav sections do not get a left hand borders

Second and third level nav sections get blue borders on their to them. When clicking on a third level nav section the second level nav sections get a gray border next to it. However the first level nav section never gets a border

First level

Second level

Third level

Recommendation is that the first level section gets a blue border when clicking on it, and a gray border when clicking on a second or third level section underneath it

Cannot collapse sections

When clicking on a section the nav underneath it automatically expands. However there is no way to collapse the expanded section. Collapsing the expanded section is useful to see what other sections are below the currently selected section at the same level.

Recommendation is that we keep the auto expanding behaviour on click, though allow collapsing a section on second click. On third click expand the section again. We'll need a visual indicator that a second is in a collapsed state.

Lack of animation/transition

Clicking between nav sections feels too snappy as there's no animation of nav sections expanding and collapsing. Because of the auto expand/collapse when navigating between nav sections, the user experience is very jarring

Recommendation is that we add a 100-300 millisecond expand/collapse animation

Duplicate second level page nav

There is a duplicate nav section embedded on the page for second level sections. It has a somewhat annoying two-column layout with large "buttons". For a long time it was so visually dominate I thought that it was the actual nav, and I didn't even notice there was a left hand nav.

I think this nav is not only unnecessary as it's a duplicate, it's actually distracting people away from the actual left hand nav

Recommendation is we simply remove the duplicate second level nav

Lack of breadcrumbs

There is no breadcrumb navigation. Breadcrumbs are a very standard way to help people know where they are.

Recommendation is that we add standard breadcrumb navigation to the top left of the page

Lack of auto-generate table of contents

Some of our pages are very long with lots of sub-sections. An auto generated table of contents at the top of the page helps people get a quick summary of what's on a page and helps them quickly get to the information they need

Recommendation is that we add an automatic table of contents at the top of every page that links to heading tags.

[GuySartorelli]

The above seems to be effectively about the css and js of the navigation.
My understanding is that we're looking at a full remake of silverstripe.org which is likely to include the docs.
Let's validate what is happening with that project and whether the docs will be included in that project, and when that's likely to happen, before we dedicate resource to this.