In-page tabs

Summary  

In-page tabs are used heavily in the RAFT example of DM-BI applications. When viewing tabular data (like cost objects, projects made up of budgets, time, and people) it is essential to provide views of each content and sub-content type while minimizing clicks for users. 

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>

Example

Related patterns

Navigation, in-line

Problem

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.

Solution

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.

Rationale

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