Skip to main content
Corporate IdentityUniversity of Johannesburg
Settings
Appearance
Design
Menu

Navigation

Locale selector

Navigate between explicitly available translations without silent fallback.

stable@uj/design/navigationVersion 1.16.1Package 1.16.1

Production component

Live preview

This example is rendered from the same package consumed by UJ applications.

Contract

Usage and quality requirements

The contract keeps purpose, states and ownership visible before a component is reused.

usage

  • Pass only locale routes authorized by the owning published projection
  • Use the current page equivalent when available
  • Mark missing translations unavailable
  • Never redirect a missing translation silently to English
  • Keep locale availability and routing outside @uj/design

states

  • closed
  • open
  • current locale
  • available translation
  • unavailable translation
  • keyboard focus
  • narrow viewport
  • dark theme
  • print hidden

purpose

Navigate between locale-specific canonical pages while making unavailable translations explicit.

responsive

  • Content-sized menu
  • Viewport-bounded width
  • Logical positioning
  • 200% text resize

accessibility

  • Labelled navigation landmark
  • Native details disclosure
  • Ordinary language links
  • Language metadata on options
  • Visible keyboard focus
  • Unavailable choices are not links
  • WCAG 2.2 AA

runtime Boundary

The component performs no fetching, routing, translation lookup, storage or content fallback.

source Authority

Corporate Identity presentation contract and owning CMS publication projections