Main nav

v2.0.0

A horizontal list of links to key areas on the website. Typically placed in the header.

Released

History
View changes
Install
npm i @gold.au/main-nav
Tags
Requires
Contributors
  • Julian Fleetwood avatar picture
  • Alexandra Baranov avatar picture
  • Simon Victory avatar picture
  • Chris Lamb avatar picture
  • Christopher Lee avatar picture
  • Alex Page avatar picture
  • DHS Web Services Team avatar picture
  • Patrick De Young avatar picture
  • Simon Pascal Klein avatar picture
  • Kiri Hoy avatar picture
  • Petra Gulicher avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture

Colour impairment

How the main nav is viewed with various colour blindnesses

Example

Grayscale

How the main nav is viewed with total colour blindness.

Example

Keyboard accessibility

How keyboard navigation works with main nav.

Example

Screen reader desktop

[ Navigation ]

[ List 6 items ]

[ Link ] About

[ Link ] Get started

Current Page, [ Link ] Components

[ Link ] Templates

[ Link ] Community

[ Link ] Support

[End of list]

[End of navigation]

Screen reader mobile

[ Navigation ]

Menu, collapsed [ button ], main-navigation

~ Enter key ~

Close, expanded [ button ]

[ List 6 items ]

[ Link ] About

[ Link ] Get started

Current Page, [ Link ] Components

[ Link ] Templates

[ Link ] Community

[ Link ] Support

[End of list]

[End of navigation]

Related components

Feedback