h2.


h1. {color:#003366}{*}Hyperlinks{*}{color}


h2. Summary  

Hyperlinks are used within content areas as well as in the Header and Footer for items that are not part of the primary navigation of the site. Any link that navigates users to a new page should use a text hyperlink.

There are additional cases in which a hyperlink can open a drop-down menu of text hyperlinks that open a new window. This exception case applies to Header navigation links that are not part of the primary persistent navigation, for instance for tools or audience navigation that is secondary but appears in a global page module.


h2. Code

Example (in use, with an interaction, in context)

{code}
 <div>
                <a id="favorites_link" rel="tooltip" title="Click to show favorites">Favorites</a>
                <span>|</span>
                <a id="messages_link" rel="tooltip" title="View Messages">Messages</a>
                <span>|</span>
                <a id="settings_link" rel="tooltip" title="View and Change User Preferences">Settings</a>
            </div>
{code}

h2. {color:#003366}{*}Example{*}{color}


!Screen shot 2013-12-02 at 2.25.54 PM.png!




h2. {color:#003366}Related patterns&nbsp;{color}

Header
Navigation
Tabs



h2. {color:#003366}Problem{color}

{color:#000000}Users need a way to navigate across pages in the application.{color}

h2. {color:#003366}Solution{color}

Hyperlinks are a way to navigate to a new page when users are not submitting form data.



h2. {color:#003366}Rationale{color}