Tabs

Simple responsive horizontal navigation tabs, with different styles

Sizes

You can choose between 5 additional sizes: is-tiny, is-small, is-medium, is-large, and is-jumbo.

Example Tiny

HTML 

<div class="tabs is-tiny">
                    <ul>
                    <li class="is-active"><a>Pictures</a></li>
                    <li><a>Music</a></li>
                    <li><a>Videos</a></li>
                    <li><a>Documents</a></li>
                    </ul>
                    </div>

Example Small

HTML 

<div class="tabs is-small">
                    <ul>
                    <li class="is-active"><a>Pictures</a></li>
                    <li><a>Music</a></li>
                    <li><a>Videos</a></li>
                    <li><a>Documents</a></li>
                    </ul>
                    </div>

Example Medium

HTML 

<div class="tabs is-medium">
                    <ul>
                    <li class="is-active"><a>Pictures</a></li>
                    <li><a>Music</a></li>
                    <li><a>Videos</a></li>
                    <li><a>Documents</a></li>
                    </ul>
                    </div>

Example Large

HTML 

<div class="tabs is-large">
                    <ul>
                    <li class="is-active"><a>Pictures</a></li>
                    <li><a>Music</a></li>
                    <li><a>Videos</a></li>
                    <li><a>Documents</a></li>
                    </ul>
                    </div>

Example Jumbo

HTML 

<div class="tabs is-jumbo">
                    <ul>
                    <li class="is-active"><a>Pictures</a></li>
                    <li><a>Music</a></li>
                    <li><a>Videos</a></li>
                    <li><a>Documents</a></li>
                    </ul>
                    </div>