Tabs & pills

Tabs and pills styles.

Get Started

1

Basic tabs

Left aligned tabs

Use the this standard structure to display .simple-tabs. Tabs are left aligned by default. Note that there are 3 tabs sizes available. Simply add .is-small, .is-medium or .is-large to the .tabs container.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs simple-tabs">
    <div class="tabs">
        <ul>
            <li class="tab-link is-active" data-tab="tab-1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

Center aligned tabs

Add the .is-centered class to the .tabs div to center the tabs.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs simple-tabs">
    <div class="tabs is-centered">
        <ul>
            <li class="tab-link is-active" data-tab="tab-a1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-a2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-a3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-a1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-a2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-a3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

Right aligned tabs

Add the .is-right class to the .tabs div to center the tabs.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs simple-tabs">
    <div class="tabs is-centered">
        <ul>
            <li class="tab-link is-active" data-tab="tab-b1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-b2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-b3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-b1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-b2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-b3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

With icons

Add a span with class .icon inside a tab link to add an icon before it.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs simple-tabs">
    <div class="tabs">
        <ul>
            <li class="is-active" data-tab="tab-c1"><a><span class="icon"><i class="sl sl-icon-user"></i></span> <span>First tabs</span></a></li>
            <li data-tab="tab-c2"><a><span class="icon"><i class="sl sl-icon-lock"></i></span> <span>Second tab</span></a></li>
            <li data-tab="tab-c3"><a><span class="icon"><i class="sl sl-icon-heart"></i></span> <span>Third tab</span></a></li>
        </ul>
    </div>
    <div id="tab-c1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-c2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-c3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>
2

Boxed tabs

Boxed tabs

Add a class the .is-boxed modifier to make the navigation tabs boxed.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs boxed-tabs">
    <div class="tabs is-boxed">
        <ul>
            <li class="is-active" data-tab="tab-d1"><a><span>First tab</span></a></li>
            <li data-tab="tab-d2"><a><span>Second tab</span></a></li>
            <li data-tab="tab-d3"><a><span>Third tab</span></a></li>
        </ul>
    </div>
    <div id="tab-d1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-d2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-d3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>
3

Animated tabs

Animated tabs

Add the .animated-tabs class to the .navigation-tabs wrapper to add an animation to the transitions.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs animated-tabs simple-tabs">
    <div class="tabs">
        <ul>
            <li class="is-active" data-tab="tab-e1"><a>First tab</a></li>
            <li data-tab="tab-e2"><a>Second tab</a></li>
            <li data-tab="tab-e3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-e1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-e2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-e3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

Translated tabs

Add the .translated-tabs class to the .navigation-tabs wrapper to add an animation to the transitions.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs translated-tabs simple-tabs">
    <div class="tabs">
        <ul>
            <li class="is-active" data-tab="tab-e1"><a>First tab</a></li>
            <li data-tab="tab-e2"><a>Second tab</a></li>
            <li data-tab="tab-e3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-e1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-e2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-e3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>
4

Full pills

Full pills

Add the .full-pills class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs full-pills primary animated-tabs">
    <div class="tabs is-centered">
        <ul>
            <li class="tab-link is-active" data-tab="tab-g1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-g2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-g3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-g1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-g2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-g3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

Full rounded pills

Add the .full-pills.rounded class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs full-pills rounded primary animated-tabs">
    <div class="tabs is-centered">
        <ul>
            <li class="tab-link is-active" data-tab="tab-j1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-j2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-j3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-j1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-j2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-j3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>
5

Light pills

Outlined pills

Add the .outlined-pills class to the .navigation-tabs wrapper to setup navigation pills.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs outlined-pills animated-tabs">
    <div class="tabs">
        <ul>
            <li class="tab-link is-active" data-tab="tab-k1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-k2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-k3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-k1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-k2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-k3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

Outlined rounded pills

Add the .outlined-pills class to the .navigation-tabs wrapper to setup navigation pills.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs outlined-pills rounded animated-tabs">
    <div class="tabs">
        <ul>
            <li class="tab-link is-active" data-tab="tab-k1"><a>First tab</a></li>
            <li class="tab-link" data-tab="tab-k2"><a>Second tab</a></li>
            <li class="tab-link" data-tab="tab-k3"><a>Third tab</a></li>
        </ul>
    </div>
    <div id="tab-k1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-k2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-k3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>
6

In cards

Pills in Card

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

Primary header

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

Secondary header

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

Accent header

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

Tabs in Card

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

On the right side

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

7

Special pills

Square icon pills

Add the .full-pills class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs animated-tabs square-pills">
    <div class="tabs is-centered">
        <ul>
            <li class="is-active" data-tab="tab-s1"><a><span class="icon"><i class="sl sl-icon-drop"></i></span></a></li>
            <li data-tab="tab-s2"><a><span class="icon"><i class="sl sl-icon-user"></i></span></a></li>
            <li data-tab="tab-s3"><a><span class="icon"><i class="sl sl-icon-cup"></i></span></a></li>
        </ul>
    </div>
    <div id="tab-s1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-s2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-s3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>

Circle icon pills

Add the .full-pills class to the .navigation-tabs wrapper to setup navigation pills. It is mandatory that you add a color in the same wrapper. Choose between .primary, .secondary, or .accent, according to your theme colors.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.

Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.

Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id

SHOW CODE 

<div class="navigation-tabs animated-tabs square-pills circle-pills">
    <div class="tabs is-centered">
        <ul>
            <li class="is-active" data-tab="tab-s1"><a><span class="icon"><i class="sl sl-icon-drop"></i></span></a></li>
            <li data-tab="tab-s2"><a><span class="icon"><i class="sl sl-icon-user"></i></span></a></li>
            <li data-tab="tab-s3"><a><span class="icon"><i class="sl sl-icon-cup"></i></span></a></li>
        </ul>
    </div>
    <div id="tab-s1" class="navtab-content is-active">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam, eligendi oportere honestatis sed id. Persius volumus has no, ex pro nisl commodo dissentias, at sed appareat consequat consectetuer.</p>
    </div>
    <div id="tab-s2" class="navtab-content">
        <p>Lorem ipsum dolor sit amet, ad blandit intellegam cum, nulla legere possit id vim, clita nullam graecis duo ne. Ea utamur tacimates reprehendunt est, ut ponderum abhorreant pri, facete regione cotidieque cu mea. Vis at duis veritus incorrupte, saperet propriae corrumpit cu eam.</p>
    </div>
    <div id="tab-s3" class="navtab-content">
        <p>Nam cibo consul insolens ei, at commune perfecto qui, ad vel summo vivendo. Ea est nostrum urbanitas accommodare. Ne mea esse possim quaerendum, sumo nullam disputando sit cu. Ridens labore dicunt mea id</p>
    </div>
</div>