New Navigation Bar

This Navigation Bar Update was approved at the Community of Practice Meeting

Change One - 12/2021

CMS Admin users voted for a change to the Grey Level Menu Bar. It was the consensus of the group the Grey Level would be more user-friendly if this were amended from a Horizontal to a Vertical Display.  When users now hover over a heading on the Blue Bar of the Navigation Menu, the Grey Bar (Child Pages) will now drop down directly Vertically from this area instead of appearing Horizontally across the whole of the Navigation Bar.

 

Old Navigation Display

New Navigation Display


 

Change Two - 12/2021

On the Top-Level Navigation Bar (Blue Level) if there are more heading items than fit horizontally across the screen - the overflowing items can be seen by clicking on the 3 dots on the right of the menu bar. Sometimes the last item is only partially seen and isn't always clickable (for example if only the first couple of characters is visible). 

We have now implemented a change so that as items start to fall off the Navigation Bar they will drop directly into a new overflow menu just below. This new Menu area will appear/disappear according to the size and shape of the platform the user is operating.

 

Old Navigation Display

New Navigation Display


Change One - 04/2022

We have now introduced a Scroll bar for the Grey dropdown menu, this will indicate to users that there is further content available, and then allow users to scroll through this further content.

Old Navigation Display

New Navigation Display

 


Update to Navigation Menu Dropdowns - 09/2023

We have introduced an update to the Top-Level Navigation (blue bar). Currently if there are more heading items than fit horizontally across the screen - the overflowing items can be seen by clicking on the ‘More’ option on the right of the menu bar. 

We have now implemented a change so that as items start to fall off the Navigation Bar, they will align into a grid with the arrows aligned, allowing for four items in a row. The links are arranged in rows of three when the screen size is below 992px.

 

Current Display

New Display

 

Tab across content-make sure you can tab across and go into the dropdown menu-(press enter to go to MORE

When hovering off the dropdown, there should be a small delay and then the dropdown menu will collapse. Users tabbing with a keyboard will also now be able to collapse the dropdown menu by using the escape key.