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.
...
| 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
...
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.