Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Tabs

Page tabs

Page tabs hold related pages together, label the pages, and allow navigation between them. An example is course navigation, that allows learners to easily jump to different features of the course, such as Activity, Replies, and their progress.

= render partial: 'shared/molecules/page_tabs', locals: {aria_label: 'Page tabs (example)', tabs: [{title: 'To do', icon: :todo, link: '#', is_active: true}, {title: 'Activity', icon: :activity, link: '#'}, {title: 'Progress', icon: :progress, link: '#'}]}

Tab details can be provided to the partial with the tabs local variable, as an array:

[{
  title: 'To do',
  icon: :todo,
  link: '/link/to/todo',
  is_active: true         # this is the selected tab
}, {
  title: 'Activity',
  icon: :activity,
  link: '/link/to/activity'
}]

If you want the active tab label to serve as the main heading of the page, set the the active_is_h1 local variable to true. This will turn the active tab label into a h1 element.

Section tabs

Lists of links can also be separated by pipes to create Tabbed Navigation:

Example m-section-tabs content using aria-labelledby.

Section tabs are used to filter content, e.g., for comments and courses.

Section tabs have a default bottom margin of 2rem; whatever follows it should not have any spacing above it.

Section tabs are just piped lists. If the URL matches the link target, the tab is marked as selected by the list_item_for_tab helper, which sets the colour and adds an ID so the aria-labelledby attribute can match it.

HAML helpers are available to build the links correctly. The code for the menu above looks like:

%nav.m-section-tabs{'aria-label': 'Tabbed (example)', role: 'navigation'}
  %ul.m-section-tabs__items
    = list_item_for_tab('/pattern-library/navigation', 'New & upcoming')
    = list_item_for_tab('/', 'In progress')
    = list_item_for_tab('/', 'Past')
  .example-content{'aria-labelledby' => 'm-section-tabs_selected'}
    %p
      m-section-tabs content. You need to add the aria roles.