h2. Code

{code}
<nav id="tabs_workset">
 <span data-contextid="costobjects" data-tabid="tab_workset_costobjects">Cost Objects and People<span></span></span>
 <span data-contextid="reports" data-tabid="tab_workset_reports">Reports<span></span></span>
 <span data-contextid="auths" data-tabid="tab_workset_auths">Authorizations<span></span></span>
 <span data-contextid="comments" data-tabid="tab_workset_comments">Comments<span></span></span>
 </nav>
{code}

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


!Screen shot 2013-12-02 at 11.36.13 AM.png!



h2. {color:#003366}Related patterns{color}

Navigation, in-line



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

Users need access to a lot of information at once. This information is made up of very different content types. We need to keep the content within its parent view, allowing users to see a complete hierarchy and valuable metadata relevant to all tabs.



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

Typically, landing pages serve as summaries, showing the default tab of the most used and most relevant information. Users navigate across tabs to access less used views of content without having to leave the page.



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

We considered placing all the information on a single long scrolling page, but the tables were deemed too long for efficient reading, and users would lose the context of the breadcrumb, page titles, and metadata as they scrolled