Tabs

Basic Tabs

Tabs are transparent by default and don't automatically do anything since they are simple <a> (anchor) elements. You can set the href attribute to make them link to another page.

Preview

I Do Nothing Ditto Open Google

Code

= daisy_tabs(css: "tabs-border") do |tabs|
  - tabs.with_tab(title: "I Do Nothing", active: true)
  - tabs.with_tab(title: "Ditto", html: { onclick: "alert('Ha! Gotcha ;-)')" })
  - tabs.with_tab(title: "Open Google", href: "https://google.com", target: "_blank")

Tab Sizes

Tabs come in five different sizes: tabs-xs, tabs-sm, tabs-md (default), tabs-lg, and tabs-xl. Each size can be combined with any tab style.

Extra Small

Small

Medium (Default)

Large

Extra Large

.space-y-8
  .space-y-2
    %p.text-sm Extra Small
    = daisy_tabs(css: "tabs-border tabs-xs") do |tabs|
      - tabs.with_tab(title: "Tab 1", active: true)
      - tabs.with_tab(title: "Tab 2")
      - tabs.with_tab(title: "Tab 3")

  .space-y-2
    %p.text-sm Small
    = daisy_tabs(css: "tabs-border tabs-sm") do |tabs|
      - tabs.with_tab(title: "Tab 1", active: true)
      - tabs.with_tab(title: "Tab 2")
      - tabs.with_tab(title: "Tab 3")

  .space-y-2
    %p.text-sm Medium (Default)
    = daisy_tabs(css: "tabs-border") do |tabs|
      - tabs.with_tab(title: "Tab 1", active: true)
      - tabs.with_tab(title: "Tab 2")
      - tabs.with_tab(title: "Tab 3")

  .space-y-2
    %p.text-sm Large
    = daisy_tabs(css: "tabs-border tabs-lg") do |tabs|
      - tabs.with_tab(title: "Tab 1", active: true)
      - tabs.with_tab(title: "Tab 2")
      - tabs.with_tab(title: "Tab 3")

  .space-y-2
    %p.text-sm Extra Large
    = daisy_tabs(css: "tabs-border tabs-xl") do |tabs|
      - tabs.with_tab(title: "Tab 1", active: true)
      - tabs.with_tab(title: "Tab 2")
      - tabs.with_tab(title: "Tab 3")

Radio Button Tabs with Content

If you want the tabs to change their content, you can use the radio option. Note that this does not allow the use of icons or other HTML elements in the title.

Preview

Tab 1 content

Tab 2 content

Tab 3 content

Code

= daisy_tabs(css: "tabs-lift w-[500px]", radio: true) do |tabs|
  - # Add some space before the first tab
  - tabs.with_tab(title: "", css: "w-14! cursor-auto!", disabled: true)

  - (1..3).each do |i|
    - tabs.with_tab(title: "Tab #{i}", content_wrapper_css: "bg-base-100 border-base-300 rounded-box p-6", checked: i == 1) do
      %p Tab #{i} content

Turbo Frame Tabs

You can also use tabs with Turbo Frames to load content dynamically.

2 bars content...

3 bars content...

4 bars content...

%turbo-frame#tabs--turob-tabs-example
  = daisy_tabs(css: "tabs-lift w-[500px]") do |tabs|
    - (2..4).each do |i|
      - is_checked = params[:custom_tab] ? params[:custom_tab] == i.to_s : i == 3
      - tabs.with_tab(href: "?custom_tab=#{i}", checked: is_checked) do |tab|
        - tab.with_title(css: "test-tab") do
          .flex.gap-x-2.items-center
            %span.size-4
              = heroicon("bars-#{i}", class: "size-4")
            %span.whitespace-nowrap #{i} Bars

        - tab.with_custom_content(css: "tab-content bg-base-100 border-base-300 rounded-box p-6") do
          %p #{i} bars content...

Basic Tabs

Tab Sizes

Radio Button Tabs with Content

Turbo Frame Tabs

Docs

Guides

Hero

Daisy