Navigation

In any application or website, navigation is the one of the key elements for a great experience. Everyone hates to be lost. Everyone hates to not be able to come back to the right page. A list of navigation patterns is here to help you design your navigation experience, using the suitable class in each situation.

Main tabs

The main tabs are styled by the .tabsbar div class. In this div, a ul list is displayed with tab items in li. The li.selected class handles the selected behavior.

Sub tabs

You may need a second level of navigation under a main tab. In addition to the initial .tabsbar class, add a .subtabsBar class and you will get the subtab style

Depending on your need and the place available, you can use links or icons in links.

Modular tabs

Categorize secondary content by using modular tabs. Made for small width containers, modular tabs inherit their style from the .tabsbar class, and the additional .modularTabs class adds some specificities.

Back navigation

If you need to add a Back button which depends on a filter or search result, display it on top of your page, in the same line as the title. In a .globalActionBar, add your .h1 and your .action_bar .directoryBack p, with your .button link class in the paragraph.

For more details on actions with titles, check the Titles section.

My title with Back link

Back to the list

Breadcrumb

The breadcrumb is useful when users need to navigate in a multi-level tree. Add it on top of your page, usually below the header, to be visible on each page. In a .breadcrumb div class that styles the position, a .breadcrumbs div class will style the links.

Add a .grayBox secondary class to display it in a box.

Page navigation

The page navigation controls are available in content views, to paginate your results when there is a lot of items. In a .pageNavigationControls div class, list your icons and display the pages numbers in a span.currentPageStatus class.