Navigation, global
Summary
Global navigation is the persistent set of hyperlinks that allow users to navigate to the primary landing pages of your website or application. In your site's taxonomy, these are the most important pages -- the pages that should be accessible from anywhere in your site or application.
navigation Navigation typically differs from standard hyperlinks in their design. They often resemble buttons, tabs, or other designer elements.
Global navigation links also sometimes include drop-down or fly-out menus on click or on hover. These menus should only appear if there are sub-navigation items that should be surfaced to save users time while navigating a site. Fly-outs should only show the second level of navigation. Fly-outs should never have fly-outs of their own.
Code
Example (in use, with an interaction, in context)
Example
Related patterns
Problem
| Code Block |
|---|
<div id="navpanel_view"><!-- NavGridView -->
<div id="navgrid_view">
<div id="navgrid_tabs"><!-- NavGridTabView -->
<nav>
<span id="my_raft_tab" title="My RAFT">
<a id="my_raft">
My RAFT
</a>
</span>
<span id="shared_tab" title="Shared">
<a id="shared">
Shared
</a>
</span>
<span id="pi_tab" title="PI">
<a id="pi">
PI
</a>
</span>
<span id="department_tab" title="Department">
<a id="department">
Department
</a>
</span>
</nav>
</div>
<div id="navgrid_buttons">
<span id="create_static_workset" title="Create New Static Workset">
<a>Add Static Workset</a>
</span>
<span id="create_dynamic_workset" title="Create New Dynamic Workset">
<a>Add Dynamic Workset</a>
</span>
</div>
<div id="navgrid_content" style="overflow: hidden; outline: 0px; "><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%; "><div><div style="left: -1000px; width: 1263px; " unselectable="on"><div id="slickgrid_731677NAV_ITEM" style="width: 248px; " title=""><span></span></div></div></div></div><div tabindex="0" style="display: none; "><div><div style="left: -1000px; width: 0px; " unselectable="on"></div></div></div><div tabindex="0" style="top: 0px; height: 100%; width: 100%; "><div style="display: none; width: 101%; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 263px; "></div><div style="width: 248px; "></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 48px; width: 100%; "><div tabindex="0" hidefocus="" style="width: 248px; height: 128px; "><div style="top:0px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="0" data-gridid="department.D_SCHOOL_ENG">School of Engineering workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div><div style="top:32px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="1" data-gridid="department.D_SCHOOL_HUM">School of Humanities & Social Science workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div><div style="top:64px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="2" data-gridid="department.D_SCHOOL_SCI">School of Science workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div><div style="top:96px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="3" data-gridid="department.D_VPRES">VP Research & Dean of the Graduate School workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div></div></div></div><div tabindex="0" style="display: none; "><div style="display: none; "><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 263px; "></div><div></div></div><div style="display: none; "><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 48px; "><div tabindex="0" hidefocus="" style="height: 128px; "></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none; "><div tabindex="0" hidefocus="" style="overflow: auto; "><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div>
</div>
</div>
|
Example
Related patterns
Navigation, in-page
Tabs
Hyperlinks
Problem
User needs to navigate among a website's main sections while still being able to quickly browse to the subsection of another.
Solution
Left navigation bar allows user to toggle to different areas quickly and easily by use of tabs. Drop down accordion menu allows for further specificity while still being easily accessible. Plus symbol, "+" is used to indicate a hidden drop down menu.
...