Tabs

The tabs need a container (which is a %div in the example). Javascript code in OBS makes the tabs responsive. Mark the active tab depending on the current page with the CSS class active.

Example

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
%div
  %ul.nav.nav-tabs.pt-2.px-3.flex-nowrap.collapsible{ 'role': 'tablist' }
    %li.nav-item
      %a.nav-link.text-nowrap.active{ href: '#' }
        Tab 1
    %li.nav-item
      %a.nav-link.text-nowrap{ href: '#' }
        Tab 2
    %li.nav-item
      %a.nav-link.text-nowrap{ href: '#' }
        Tab 3
    %li.nav-item.dropdown
      %a.nav-link.dropdown-toggle{ href: '#', 'data-toggle': 'dropdown', 'role': 'button', 'aria-expanded': 'false', 'aria-haspopup': 'true' }
      .dropdown-menu.dropdown-menu-right
        %a.dropdown-item.text-nowrap{ href: '#' }
          Tab 4