Design

Navigation is used to provide a set of controls that take the user to another view. Some controls look similar to navigation, but it's only navigation if the user "goes somewhere" after they activate the control.

If the user is not taken to a new page, it is likely that Tabs, a Button or Button Group would be more appropriate for the interaction.

There are several types of navigation.

  • The Sidebar Menu is the primary navigation in the data room. As it interacts with the entire page's structure it is documented as a stand-alone pattern.
  • Vertical is the default within the content area
  • Horizontal is the default when placed within header.
  • Breadcrumb is used when the items represent a hierarchy, giving context to the current view.
  • Pagination is used to break up large data sets, for example search results.

On small screens, Horizontal navigation becomes Vertical; while Breadcrumbs and Pagination wrap to new lines.

Pagination

Design rule Demonstration
Default pagination is 10 results per page. For 1-10 results, Pagination navigation simply states the number of results.

A maximum of 11 items can be shown in Pagination navigation, including Previous and Next controls; truncation markers; and page items.

For nine pages or less, truncation is not required.

For ten pages or more, truncation is required. Truncated data sets are navigated maintaining a 'contextual set' of five items - eg. the current page, with the two previous and next pages.
On the first item, omit the Previous control.
For the first three items in the set, truncate to the right of the contextual set; but not to the left.
For the fourth item, the contextual set increases to six items to avoid a pointless truncation marker the left.
From the fifth to the fifth-last items, a contextual group of five sits in the middle; between two truncation markers and Previous/Next.
For the fourth-last item, the contextual set increases to six items to avoid a pointless truncation marker to the right.
For the last three items in the set, truncate to the left of the contextual set; but not to the right.
On the last item, omit the Next control.

Code

Example Element Code
Vertical navigation. 

                                                                                          <nav class="ace-nav-container" role="navigation">
                                                                                                <ul class="ace-nav ace-nav-default">
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Documents</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Q&amp;A</a></li>
                                                                                                      <li class="ace-nav-item ace-nav-active"><a href="http://example.com/">Reports</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Manage</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Notifications</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Support</a></li>
                                                                                                </ul>
                                                                                          </nav>

                                                                                      <% ace.nav_container(Array())
                                                                                        ace.nav(Array("type","default"))
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Documents"_
                                                                                          ))
                                                                                          ace.nav_item_end
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Q&A"_
                                                                                          ))
                                                                                          ace.nav_item_end
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Reports",_
                                                                                            "active","true"_
                                                                                          ))
                                                                                          ace.nav_item_end
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Manage"_
                                                                                          ))
                                                                                          ace.nav_item_end
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Notifications"_
                                                                                          ))
                                                                                          ace.nav_item_end
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Support"_
                                                                                          ))
                                                                                          ace.nav_item_end  
                                                                                        ace.nav_end
                                                                                      ace.nav_container_end %>
Horizontal navigation. 

                                                                                          <nav class="ace-nav-container" role="navigation">
                                                                                                <ul class="ace-nav ace-nav-horizontal">
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Documents</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Q&amp;A</a></li>
                                                                                                      <li class="ace-nav-item ace-nav-active"><a href="http://example.com/">Reports</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Manage</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Notifications</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">Support</a></li>
                                                                                                </ul>
                                                                                          </nav>

                                                                                      <% ace.Nav_Container(Array())
                                                                                        ace.Nav(Array("type","horizontal"))
                                                                                          ace.Nav_Item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Documents"_
                                                                                          ))
                                                                                          ace.Nav_Item_End
                                                                                          ace.Nav_Item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Q&A"_
                                                                                          ))
                                                                                          ace.Nav_Item_End
                                                                                          ace.Nav_Item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Reports",_
                                                                                            "active","true"_
                                                                                          ))
                                                                                          ace.Nav_Item_End
                                                                                          ace.Nav_Item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Manage"_
                                                                                          ))
                                                                                          ace.Nav_Item_End
                                                                                          ace.Nav_Item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Notifications"_
                                                                                          ))
                                                                                          ace.Nav_Item_End
                                                                                          ace.Nav_Item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Support"_
                                                                                          ))
                                                                                          ace.Nav_Item_End  
                                                                                        ace.Nav_End
                                                                                      ace.Nav_Container_End %>
Breadcrumb navigation.
Breadcrumb navigation using assets.
Breadcrumb tree navigation.
Pagination navigation showing Previous, Next, Current and Truncation items. Note that Current and Truncation items get an ace-text span instead of a link. 

                                                                                          <nav class="ace-nav-container" role="navigation">
                                                                                                <ul class="ace-nav ace-nav-pagination">
                                                                                                      <li class="ace-nav-item ace-nav-pagination-prev"><a href="http://example.com/"><span class="ace-icon ace-icon-control-arrowleft" title="Previous">Previous</span></a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">1</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">2</a></li>
                                                                                                      <li class="ace-nav-item ace-nav-pagination-current"><span class="ace-text">3</span>
                                                                                                      </li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">4</a></li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">5</a></li>
                                                                                                      <li class="ace-nav-item ace-nav-pagination-truncation"><span class="ace-text">...</span>
                                                                                                      </li>
                                                                                                      <li class="ace-nav-item"><a href="http://example.com/">10</a></li>
                                                                                                      <li class="ace-nav-item ace-nav-pagination-next"><a href="http://example.com/"><span class="ace-icon ace-icon-control-arrowright" title="Next">Next</span></a></li>
                                                                                                </ul>
                                                                                          </nav>

                                                                                      <% ace.nav_container(Array())
                                                                                        ace.nav(Array(_
                                                                                          "type","pagination"_
                                                                                        ))
                                                                                          ace.nav_item(Array(_
                                                                                            "type", "pagination-prev",_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Previous"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","1"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","2"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "type", "pagination-current",_
                                                                                            "text","3"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","4"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","5"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "type", "pagination-truncation"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "href","http://example.com/",_
                                                                                            "text","10"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                      
                                                                                          ace.nav_item(Array(_
                                                                                            "type", "pagination-next",_
                                                                                            "href","http://example.com/",_
                                                                                            "text","Next"_
                                                                                          ))
                                                                                          ace.nav_item_end()
                                                                                        ace.nav_end()
                                                                                      
                                                                                        ace.nav_container_end() %>

Navigation attributes