Header navigation

Hi, I am just wondering why the header nav does not have a selected state – what is the rationale behind this from a user perspective?

Hey Tim - I think for a time there was an ‘active state’ proposed, maybe @tjharrop will know the decision behind not going ahead with that?

From a quick look at some other sites:

Hey Tim,

In all honesty, I don’t think we’ve made an active decision to exclude it, it’s just not a feature we have. It looks like the previous incarnation of our team did some research, so I’ll keep looking around for their findings.

If you’ve got any insights/research/knowledge on the topic and want to propose whether we should specifically introduce or exclude it, we’d be open to that. If we do create one it would be part of the main nav component as optional, since the main nav isn’t actually a :small_blue_diamond: blue diamond :small_blue_diamond: component, and so usage isn’t mandatory. We’re in the middle of formalising how those lines around the components ‘work’ (not in a technical sense, in consistency terms) so this could tie up with that.

We’re open to suggestions!

TJ

Thanks for looking into it TJ,

I think it would be helpful for the user. NN/G have an article that recommends it – and I learned a new term from it – “location signalling”!

cheers
Tim

Hi team,

I’ve had a query from a team member around sticky nav when users scroll and if that’s something that will be incorporated.

Are you able to point me in the right direction for this one?

Cheers,
Chris

Hi @andrei.vidaicu,
I observed a slight inconsistency in the cursor behavior on http://nsw.gov.au and the NSW digital design system demo and code. We noticed this when we attempted to implement the header in our AEM environment, and we found that the search button and language button do not change the cursor to a pointer hand. However, the Myservice NSW button and NSW logo work as expected. Is there any specific reason why the cursor behaves differently on these two elements?

Thanks!
Mike

Hi @mikegu ,

Thanks for your input.

The actions associated with the two elements differ from a traditional button that navigates users somewhere else:

  • The language button reveals the languages dropdown when clicked.
  • The search box requires an extra click. The first click on the icon reveals the input box. However, once it’s revealed, the cursor could potentially change to the hand icon when hovering over the search icon.
1 Like