Panning Navigator


Users need to navigate an area that is larger than the display they use


Show a preview of the entire image with the currently viewable area marked


Use when

Reading large texts or viewing maps/images. for example on a Article Page or Product Page or even Case Study as shown in the example.


User can change the area they view by dragging the viewable area marking.


More Examples

plml logo


2 comments have been added to this pattern

LJ, 23rd April 2008
I think that this pattern belongs to another large pattern called "Side bar". Don't you think that patterns like "Header" and "Footer" are worth defining?
Pete Kirkham, 10th December 2008
No, this is about the navigator pattern (aka mini-map), not the location. Side-bars in print are normally additional information rather than navigation, or are used for links away in hypertext. This pattern is for navigation within a content area.

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below