Navigation

Design

There are several types of navigation. Vertical navigation is the default within #content and horizontal is the default when placed within #header. Breadcrumb navigation is used when the items represent a hierarchy, giving context to the current view.

Note: On small screens or less horizontal navigation will become vertical navigation.

Navigation is used to structure the key areas of the product.

Code

API: stable
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.

Navigation attributes