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.

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.

> Intranet > Workspace > Developer Team

> Intranet > Workspace > Developer Team

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.