The problem

• Frequent navigation requires multiple clicks and context switching
• Patterns vary across courses, increasing cognitive load
• Designers often lack theme access, restricting global changes

Constraints

• Page-level only (no theme/LTI); must be keyboard navigable
• Maintain AA contrast; responsive; easy to duplicate
• Should sit above/below page content without breaking layout

The solution

Process

• Review current course pages and common journeys
• Prototype HTML/CSS in a test shell; scope styles locally
• Confirm contrast, focus states and tab order
• Create variants (topic rail, compact quick nav, instances)
• Duplicate across pages; validate active-state consistency
• Walkthrough with the academic; capture feedback
• Consult the media team on alignment with upcoming global navigation

Media team consultation & feedback

• Confirmed that global navigation is being delivered at the theme level, and should remain the system standard.
• Supportive of this page-level component as a temporary, course-specific aid when clearly labelled as non-standard.
• Guidance: keep AA contrast, visible focus rings, and generous hit areas; check spacing on smaller viewports.
• Recommendation: provide a template page and short "how to" so academics don't fork styles; avoid conflicting with theme CSS.
• Governance note: any theme-level change should route through Media for review and release cadence.

Variants

• Topic rail — topics 1–10 with active state and prev/next
• Compact quick nav — home, topics, assignments, extra resources
• Instances view — repeated bars across pages to confirm consistency

Accessibility

• Semantic <nav> landmark with labelled list structure
• Visible focus indicators; aria-current="page" for the active item
• Minimum AA contrast; large hit areas; keyboard-only operation
• Meaningful labels for any icon-only buttons

Outcomes

• Consistent in-page pattern ready for wider trial
• Faster setup for designers (copy/paste then update targets)
• Positive pilot feedback; media team alignment achieved; candidates identified for templating

Reflection & next steps

• Convert snippet into a canvas template page for adoption at scale
• Explore auto-highlighting of the current week/topic
• Produce a short setup video and a redacted example course
• Coordinate with the media team on timing and governance for any future theme-level include or retirement of the page-level pattern once global nav is live

Resources

Gallery

Nav bar implemented on teaching page

Academics original attempt

Weekly nav page instances set up as template for academic