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.
<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>
Add the .is-centered class to the .tabs div
to center the tabs.
<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>
Add the .is-right class to the .tabs div to
center the tabs.
<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>
Add a span with class .icon inside a tab
link to add an icon before it.
<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>
Add a class the .is-boxed modifier to make the navigation
tabs boxed.
<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>
Add the .animated-tabs class to the
.navigation-tabs wrapper to add an animation to the
transitions.
<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>
Add the .translated-tabs class to the
.navigation-tabs wrapper to add an animation to the
transitions.
<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>
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.
<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>
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.
<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>
Add the .outlined-pills class to the
.navigation-tabs wrapper to setup navigation pills.
<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>
Add the .outlined-pills class to the
.navigation-tabs wrapper to setup navigation pills.
<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>
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.
<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>
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.
<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>
