Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

Title[DISCOVERY] Floating in-page navigation on course pages
GoalFind out the requirements for the floating in-page navigation implementation
Pivotal story


  1. We should add a section for Prepare for your future so it can be added into the in-page navigation.
  2. We should create a design story to revisit the in-page navigation active and non-active state styling.
  3. We should implement with Magellan foundation.
  4. We should do a thorough manual accessibility testing after implementation.
  5. We should carry out user testing after the implementation.


We've received requests from our users to make the course page navigation easier. We currently have an in-page navigation located in the first column of the page just below the hero image. However, we would like to make sure that the ease to navigate through the page continues all the way to the bottom of the page as well. With that said, we are looking to float the in-page navigation as user scrolls through.  This will allow users to see which section they are currently on and can navigate between sections via the floating navigation. An example to the in-page navigation is Stick, Smooth, Active Nav

This discovery page includes the requirements from all course page stakeholders. 

The requirements from Faculty Web Editors 

  1. Show all main headings on the in-page navigation as we are currently doing.

  2. Make sure the in-page navigation stays in view, as users scroll thorough the page. 

  3. Add the Graduate Prospects section (known as Prepare for your future - on live pages) to the in-page navigation.

The requirements from the Content Team

  1. Keep the in-page navigation on the right side of the page to keep consistency of user experience across the platform. 

  2. Make sure there is an 'active' state to make it clear to users, which section they are current on.
  3. In order to add 'Graduate Prospects' to the in-page navigation, we will need to create a section for it. This is to keep the consistency in the user experience, as every link in the in-page navigation has its own section. With that said, we will require content to fill this section. This should be a collaboration between Faculty Web Editors and Content Team. 
  4. We should carry out user testing to measure the ease of use between the floating and not floating in-page navigation. 

The requirements from our Designers

  1. Our in-page navigation is currently sitting on the right side of the course description, which has been formatted to accommodate it alongside the body text. If we were going to implement the sticky function straightaway in its current form, the in-page navigation is going to overlap with the content further down the page. As a result, we need to create a design story to revisit our in-page navigation style and position. 

  2. We need to have a look at how we should indicate the 'active' state of the navigation. Example of solutions: Different colours of the headings when users are in that section? Bold text?  
  3. We need to keep in mind to create a new in-page navigation component that would work with other third party elements such as Gecko chat or the Ask a question bar. In implementation, some of the elements might also be set as 'hidden'. This is to avoid the accessibility issue stated in Accessibility section. 

The requirements from our Developers

Comments from developers are added according to each possible solution.

  1. Fixed menu CSS by W3C 
    This will make the menu stick at the top of the page as users scroll down, i.e. the in-page navigation on Loughborough university course page. If we want to implement a similar feature, we are very likely to have a problem with the menu options being too long. 

2. Smooth in-page navigation with CSS and Javascript 

Smooth in-page navigation could be achieved with Magellan - it's just a different way of doing the same thing. 

3. Magellan with CSS, Javascript and Foundation 6.63

Our Lens Design System is currently using Foundation 6.3.1. which supports Magellan (the name of the Foundation in-page navigation component). It seems to be sensible to proceed with implementing Magellan.


These solutions mainly focus on the behaviour of the large breakpoint. It may be beneficial to investigate in A different approach to sticky in-page navigation on small devices when we consider developing a similar in-page navigation on the small breakpoint.


Reference from GOV.UK, 2018, Sticky elements: functionality and accessibility testing, main issue with accessibility is the sticky header overlapped some content on the page and navigating backwards through elements often left the focused element obscured by the sticky element. As a result, I recommend that we have a thorough manual accessibility testing once the floating in-page navigation was implemented. 

Screenshot of step by step instructions when learning to drive

Reference image from GOV.UK. 'The step nav header in sticky mode on a mobile device. It remained at the top of the view even when the page was scrolled.'


Information which supports the discovery work:

  • No labels