Bootstrap v4 navbar tabs_on_rails tab builder

navbar_tab_builder.rb

class NavbarTabBuilder < TabsOnRails::Tabs::Builder
  def open_tabs(options = {})
    options[:class] ||= "nav navbar-nav"
    @context.tag("ul", options, open = true)
  end

  def close_tabs(options = {})
    "</ul>".html_safe
  end

  def tab_for(tab, name, options, item_options = {})
    li_options = {}
    li_options[:class] = "#{li_options[:class]} nav-item"
    if current_tab?(tab)
      li_options[:class] << " active"
    end

    item_options[:class] = "#{item_options[:class]} nav-link"

    @context.content_tag(:li, li_options) do
      @context.link_to(name, options, item_options)
    end
  end
end

👍

Thanks for this. I was trying to figure out the best way to integrate tabs_on_rails with Bootstrap 4's navbar classes, specifically adding the nav-link class to the link elements inside the lis.

After comparing what you have to the tabs_on_rails source, I've made some changes to what I am using and thought I should share.

I wasn't sure where to put the custom tab builder file. With supporting opinions from tabs_on_rails issue #10 and tabs_on_rails issue #19, ultimately I decided that it lives in app/helpers/tabs_helper.rb:

module TabsHelper
  class Bootstrap4NavbarTabBuilder < TabsOnRails::Tabs::Builder
    def open_tabs(options = {})
      options[:class] = options[:class].to_s.split(' ').push('navbar-nav').join(' ') unless options[:class].to_s[/\bnavbar-nav\b/]
      @context.tag('ul', options, open = true)
    end

    def close_tabs(options = {})
      '</ul>'.html_safe
    end

    def tab_for(tab, name, url_options, item_options = {})
      li_classes = item_options[:class].to_s.split(' ')
      li_classes.push('nav-item')
      li_classes.push(@options[:active_class] || 'active') if current_tab?(tab)
      item_options[:class] = li_classes.join(' ')
      link_options = { class: 'nav-link'}
      link_options[:class] << ' disabled' if li_classes.include?('disabled')
      content = @context.link_to_unless(current_tab?(tab), name, url_options, link_options) do
        @context.content_tag(:span, name)
      end
      @context.content_tag(:li, content, item_options)
    end
  end
end

Implemented thusly (in app/views/application/_header.slim):

#header.navbar.navbar-expand-lg.bg-dark role='navigation'
  .navbar-header
    = link_to Rails.application.name, root_path, {class: 'navbar-brand'}
    button.navbar-toggler type='button' data-toggle='collapse' data-target='#navbar-main_nav'
      span.sr-only Toggle navigation
      span.navbar-toggler-icon
  #navbar-main_nav.collapse.navbar-collapse
    - if signed_in?
      = tabs_tag builder: TabsHelper::Bootstrap4NavbarTabBuilder, namespace: :main_nav, open_tabs: {id: 'main-nav'} do |tab|
        = tab.dashboard 'Dashboard', dashboard_path