I'm writing about responsive navigation for school.

I found on the internet that responsive navigation patterns could be divide as:

  • Toggle or multi-toggle pattern
  • Footer anchor pattern
  • Navigation overlay pattern
  • Slide-in/slide-out pattern
  • Vertical stacking pattern
  • <select>-drop-down pattern
  • “Transformer tabs” pattern
  • Off-canvas-navigation

Now, I can't find real difference between "Navigation overlay pattern" and "Toggle" pattern.

Can anyone help explain the difference?

  • This question would definitely be better over on UX, but it's still mostly just opinion based. The list of navigation patterns is fine, but also mostly arbitrary and somewhat subjective. There's no official dictionary of UI pattern terms, unfortunately. :)
    – DA01
    Dec 2, 2014 at 8:18
  • 1
    This question appears to be off-topic because it is about UX rather than graphic design.
    – Alan Gilbertson
    Dec 7, 2014 at 7:13

2 Answers 2


Well, the definition of toggle is to switch from one effect, feature, or state to another. In the case of a navigation, it's a change between states.

On the other hand, an overlay is something laid as a covering over something else.

As you can see by the two definitions, they're completely different things.

However, navigation overlays often implement toggling between two states. This is because toggled navigation is usually hidden, then toggled to not be hidden. But, this isn't always the case.


I agree with Zach's answer. You can see a demo of these two navigation patterns in action here:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.