Tabs can be used to show a list of links in a tabbed format.
Class name | Type | |
---|---|---|
tabs | Component | Container of multiple tab items |
tab | Part | A single tab button (can be button, link, div, radio input, etc) |
tab-content | Part | Tab content that comes immediately after a tab |
tabs-box | Style | box style |
tabs-border | Style | bottom border style |
tabs-lift | Style | lift style |
tab-active | Modifier | Makes a single tab look active |
tab-disabled | Modifier | Makes a single tab look disabled |
tabs-top | Placement | Puts tab buttons on top of the tab-content (default) |
tabs-bottom | Placement | Puts tabs on under the tab-content |
tabs-xs | Size | Extra small size |
tabs-sm | Size | Small size |
tabs-md | Size | Medium size [Default] |
tabs-lg | Size | Large size |
tabs-xl | Size | Extra large size |
<div role="tablist" class="$$tabs"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-border"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-border">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-border"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-border">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-lift">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-lift">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-box"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-box">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-box"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active">Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-box">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active">Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-box"> <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 1" /> <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 2" checked="checked" /> <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 3" /> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
<input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 1" />
<input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 2" checked="checked" />
<input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 3" />
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-box"> <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 1" /> <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 2" checked="checked" /> <input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 3" /> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
<input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 1" />
<input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 2" checked="checked" />
<input type="radio" name="my_tabs_1" class="$$tab" aria-label="Tab 3" />
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs"> <a role="tab" class="$$tab">Xsmall</a> <a role="tab" class="$$tab $$tab-active">Xsmall</a> <a role="tab" class="$$tab">Xsmall</a> </div> <div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm"> <a role="tab" class="$$tab">Small</a> <a role="tab" class="$$tab $$tab-active">Small</a> <a role="tab" class="$$tab">Small</a> </div> <div role="tablist" class="$$tabs $$tabs-lift"> <a role="tab" class="$$tab">Medium</a> <a role="tab" class="$$tab $$tab-active">Medium</a> <a role="tab" class="$$tab">Medium</a> </div> <div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg"> <a role="tab" class="$$tab">Large</a> <a role="tab" class="$$tab $$tab-active">Large</a> <a role="tab" class="$$tab">Large</a> </div> <div role="tablist" class="$$tabs $$tabs-lift $$tabs-xl"> <a role="tab" class="$$tab">Xlarge</a> <a role="tab" class="$$tab $$tab-active">Xlarge</a> <a role="tab" class="$$tab">Xlarge</a> </div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs">
<a role="tab" class="$$tab">Xsmall</a>
<a role="tab" class="$$tab $$tab-active">Xsmall</a>
<a role="tab" class="$$tab">Xsmall</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm">
<a role="tab" class="$$tab">Small</a>
<a role="tab" class="$$tab $$tab-active">Small</a>
<a role="tab" class="$$tab">Small</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
<a role="tab" class="$$tab">Medium</a>
<a role="tab" class="$$tab $$tab-active">Medium</a>
<a role="tab" class="$$tab">Medium</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg">
<a role="tab" class="$$tab">Large</a>
<a role="tab" class="$$tab $$tab-active">Large</a>
<a role="tab" class="$$tab">Large</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xl">
<a role="tab" class="$$tab">Xlarge</a>
<a role="tab" class="$$tab $$tab-active">Xlarge</a>
<a role="tab" class="$$tab">Xlarge</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs"> <a role="tab" class="$$tab">Xsmall</a> <a role="tab" class="$$tab $$tab-active">Xsmall</a> <a role="tab" class="$$tab">Xsmall</a> </div> <div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm"> <a role="tab" class="$$tab">Small</a> <a role="tab" class="$$tab $$tab-active">Small</a> <a role="tab" class="$$tab">Small</a> </div> <div role="tablist" class="$$tabs $$tabs-lift"> <a role="tab" class="$$tab">Medium</a> <a role="tab" class="$$tab $$tab-active">Medium</a> <a role="tab" class="$$tab">Medium</a> </div> <div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg"> <a role="tab" class="$$tab">Large</a> <a role="tab" class="$$tab $$tab-active">Large</a> <a role="tab" class="$$tab">Large</a> </div> <div role="tablist" class="$$tabs $$tabs-lift $$tabs-xl"> <a role="tab" class="$$tab">Xlarge</a> <a role="tab" class="$$tab $$tab-active">Xlarge</a> <a role="tab" class="$$tab">Xlarge</a> </div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xs">
<a role="tab" class="$$tab">Xsmall</a>
<a role="tab" class="$$tab $$tab-active">Xsmall</a>
<a role="tab" class="$$tab">Xsmall</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-sm">
<a role="tab" class="$$tab">Small</a>
<a role="tab" class="$$tab $$tab-active">Small</a>
<a role="tab" class="$$tab">Small</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift">
<a role="tab" class="$$tab">Medium</a>
<a role="tab" class="$$tab $$tab-active">Medium</a>
<a role="tab" class="$$tab">Medium</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-lg">
<a role="tab" class="$$tab">Large</a>
<a role="tab" class="$$tab $$tab-active">Large</a>
<a role="tab" class="$$tab">Large</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift $$tabs-xl">
<a role="tab" class="$$tab">Xlarge</a>
<a role="tab" class="$$tab $$tab-active">Xlarge</a>
<a role="tab" class="$$tab">Xlarge</a>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-border"> <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 1</div> <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 2</div> <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-border">
<input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>
<input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>
<input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-border"> <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 1</div> <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 2</div> <input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-border">
<input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>
<input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>
<input type="radio" name="my_tabs_2" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-lift"> <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div> <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div> <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift">
<input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-lift"> <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div> <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div> <input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift">
<input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_3" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-lift $$tabs-bottom"> <input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div> <input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div> <input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift $$tabs-bottom">
<input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-lift $$tabs-bottom"> <input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div> <input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div> <input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-lift $$tabs-bottom">
<input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_4" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-box"> <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div> <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div> <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
<input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<!-- name of each tab group should be unique --> <div class="$$tabs $$tabs-box"> <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 1" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div> <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 2" checked="checked" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div> <input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 3" /> <div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div> </div>
<!-- name of each tab group should be unique -->
<div class="$$tabs $$tabs-box">
<input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 1" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 2" checked="checked" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_5" class="$$tab" aria-label="Tab 3" />
<div class="$$tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
</div>
<div role="tablist" class="$$tabs $$tabs-lift"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-lift">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>
<div role="tablist" class="$$tabs $$tabs-lift"> <a role="tab" class="$$tab">Tab 1</a> <a role="tab" class="$$tab $$tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a> <a role="tab" class="$$tab">Tab 3</a> </div>
<div role="tablist" class="$$tabs $$tabs-lift">
<a role="tab" class="$$tab">Tab 1</a>
<a role="tab" class="$$tab $$tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
<a role="tab" class="$$tab">Tab 3</a>
</div>