Tabs

More documentation can be found MDB's site, here . If you would like the tabs to behave like regular links to pages do not include the data: { toggle: :tab } attribute

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit

magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

%nav.navbar.n2-navbar.mt-4.blue.js-search-1
  %i.material-icons.menu-action menu

  .heading Toolbar
  .col
  .col-lg-6
    = form_tag "/toolbar", class: "d-flex n2-search-bar blue hidden input-dark-bg darken-1", method: :get do
      %button.d-flex.p-0.btn-flat.with-icon.cursor-pointer{ type: :submit }
        %i.material-icons.white-text.mr-2 search
      = text_field_tag :search, placeholder: "Search", autofocus: true, required: true
      %i.material-icons.hidden.empty-search-input close

  %i.material-icons.show-search-input search
  = image_tag "avatar.jpg", class: "avatar circle"

%nav.navbar.n2-navbar.blue
  .tabs-wrapper
    %ul.nav.classic-tabs.tabs-blue{ role: :tablist }
      %li.nav-item
        = link_to "Profile", "#tab1", class: "nav-link waves-light active", role: :tab, data: { toggle: :tab }
      %li.nav-item
        = link_to "Follow", "#tab2", class: "nav-link waves-light", role: :tab, data: { toggle: :tab }
      %li.nav-item
        = link_to "Contact", "#tab3", class: "nav-link waves-light", role: :tab, data: { toggle: :tab }
      %li.nav-item
        = link_to "Be Awesome", "#tab4", class: "nav-link waves-light", role: :tab, data: { toggle: :tab }
.tab-content
  #tab1.tab-pane.fade.in.show.active{ role: :tabpanel }
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  #tab2.tab-pane.fade{ role: :tabpanel }
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  #tab3.tab-pane.fade{ role: :tabpanel }
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  #tab4.tab-pane.fade{ role: :tabpanel }
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Pong Tabs

new N2Styles.pongTabs()
%nav.navbar.n2-navbar.mt-4.blue.js-search-1
  %i.material-icons.menu-action menu

  .heading Toolbar
  .col
  .col-lg-6
    = form_tag "/toolbar", class: "d-flex n2-search-bar blue hidden input-dark-bg darken-1", method: :get do
      %button.d-flex.p-0.btn-flat.with-icon.cursor-pointer{ type: :submit }
        %i.material-icons.white-text.mr-2 search
      = text_field_tag :search, placeholder: "Search", autofocus: true, required: true
      %i.material-icons.hidden.empty-search-input close

  %i.material-icons.show-search-input search
  = image_tag "avatar.jpg", class: "avatar circle"

%nav.navbar.n2-navbar.blue
  .tabs-wrapper
    %ul.nav.classic-tabs.tabs--slider
      %li.pong-nav-item
        = link_to "Profile", "#tab5", class: "pong-nav-link active"
      %li.pong-nav-item
        = link_to "Follow", "#tab6", class: "pong-nav-link"
      %li.pong-nav-item
        = link_to "Contact", "#tab7", class: "pong-nav-link"
      %li.pong-nav-item
        = link_to "Be Awesome", "#tab8", class: "pong-nav-link"
      %hr.pong-bar
.tab-content