Improve no-js version of the main navigation #1535
Description
Navigation
There is a version of the main navigation that is rendered in the absence of javascript. This ensures all visitors to the site can perform basic navigation if javascript does not download to their device or if it is disabled. It currently wraps each navigation element onto a new line:
However, this style causes significant layout shift for mobile devices and desktop sites where the individual nav item titles are long, like the new intranet.
I would like to propose an alternative, where in no-js scenarios, the height of the navigation is fixed and we use CSS to allow a user to scroll through the overflowing nav elements. This poses the following questions:
- how can we surface the scrolling behaviour to the user?
- how will this affect keyboard navigation