<?php
$nav = new Barebone\Bootstrap\Nav();
$nav->tabs();
$nav->addItem('Home', '/', true);
$nav->addItem('Contact', '/contact/');
$nav->addItem('Messages', '/messages/');
echo $nav;
<ul class="nav nav-tabs"> <li class="active"> <a href="/">Home</a> </li> <li> <a href="/contact/">Contact</a> </li> <li> <a href="/messages/">Messages</a> </li> </ul>
<?php
$nav = new Barebone\Bootstrap\Nav();
$nav->pills();
$nav->addItem('Home', '/', true);
$nav->addItem('Contact', '/contact/');
$nav->addItem('Messages', '/messages/');
echo $nav;
<ul class="nav nav-pills"> <li class="active"> <a href="/">Home</a> </li> <li> <a href="/contact/">Contact</a> </li> <li> <a href="/messages/">Messages</a> </li> </ul>
Pills are also vertically stackable. Just add $nav->stacked().
<?php
$nav = new Barebone\Bootstrap\Nav();
$nav->pills();
$nav->stacked();
$nav->addItem('Home', '/', true);
$nav->addItem('Contact', '/contact/');
$nav->addItem('Messages', '/messages/');
echo $nav;
<ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="/">Home</a> </li> <li> <a href="/contact/">Contact</a> </li> <li> <a href="/messages/">Messages</a> </li> </ul>
Easily make tabs or pills equal widths of their parent at screens wider than 768px with Just add $nav->justified().
On smaller screens, the nav links are stacked.
<?php
$nav = new Barebone\Bootstrap\Nav();
$nav->pills();
$nav->justified();
$nav->addItem('Home', '/', true);
$nav->addItem('Contact', '/contact/');
$nav->addItem('Messages', '/messages/');
echo $nav;
<ul class="nav nav-pills nav-justified"> <li class="active"> <a href="/">Home</a> </li> <li> <a href="/contact/">Contact</a> </li> <li> <a href="/messages/">Messages</a> </li> </ul>