It's often the case that a web page links to itself. This can be frustrating for the user, especially if the page takes a long time to load.
Instead of self-linking, a page can suppress links to itself, and at the same time highlight the link text in some way, to clearly indicate the current page. The user is able to painlessly answer the common question "Where am I on this site?", at the same time as they are prevented from following a link that is usually useless. Such a style clearly has more compassion for the user's experience.
There are two ways to avoid self-linking in a set of navigation links :
- copy and paste the set of navigation links across all pages, and manually alter each possible occurrence of self-linking.
- define the set of navigation links in one place, and create some means of dynamically suppressing self-linking when generating each page. This is the preferred style, since it defines the menu in a single place.
For the dynamic style, there is no standard way to define how such links are suppressed. An implementation might rely on a naming convention, for example, to identify self-linking items that should be altered in some manner.
Example
This example uses WEB4J's HighlightCurrentPage custom tag to dynamically avoid self-linking.
The following JSP snippet appears in a template, and displays a small navigation bar. At runtime, one link in the navigation bar is suppressed, and shows only plain text instead of the full link. In addition, it highlights the text (using a CSS class) to render it more obvious as the current page. This is all implemented with <w:highlightCurrentPage>. The tag uses one of two policies to identify links that are to be altered:
- matching the current URI to the end of the link's HREF target (this the default style)
- matching the textual body of the link to a substring of the TTitle request parameter used by the WEB4J templating mechanism
<div class="menu-bar"> <w:highlightCurrentPage styleClass='highlight'> <c:url value="/main/home/HomePageAction.do" var="homeURL"/> <A href='${homeURL}'>Home</a> <c:url value="/main/rsvp/RsvpShow.do" var="showRsvpURL"/> <A href='${showRsvpURL}'>Rsvp</a> <c:url value="/main/visit/VisitAction.do?Operation=List" var="visitEditURL"/> <A HREF='${visitEditURL}'>Visits</A> <c:url value="/main/rating/RatingAction.do?Operation=List" var="ratingEditURL"/> <A HREF='${ratingEditURL}'>Ratings</A> <c:url value="/all/logoff/LogoffAction.do" var="logoffURL"/> <A href='${logoffURL}'>Log Off</a> </w:highlightCurrentPage> </div>