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. The tabs will collapse in a dropdown when there isn’t enough space to display them. We fake it here by forcing the tabs container to occupy only 25% of the available space.

Example

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
%div.w-25
  %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
      %a.nav-link.text-nowrap{ href: '#' }
        Tab 4
    %li.nav-item
      %a.nav-link.text-nowrap{ href: '#' }
        Tab 5
    %li.nav-item
      %a.nav-link.text-nowrap{ href: '#' }
        Tab 6
    %li.nav-item
      %a.nav-link.text-nowrap{ href: '#' }
        Tab 7
    %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