Basic tabs

Take a regular <ul> of links and add .romo-tabs.

<ul class="romo-tabs">
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Active state

For any tab items, add .active to show the item as active.

<ul class="romo-tabs">
  <li class="active">...</li>
  <li>...</li>
  <li>...</li>
</ul>

Disabled state

For any tab items, add .disabled for disabled link UI with no hover effects. Links remain clickable unless you remove the href attribute or implement custom JavaScript to prevent those clicks.

<ul class="romo-tabs">
  <li class="active">...</li>
  <li>...</li>
  <li class="disabled">...</li>
</ul>

To align tab items, use the .romo-tabs-pull-left or .romo-tabs-pull-right classes.

<ul class="romo-tabs romo-tabs-pull-left">...</ul>
<ul class="romo-tabs romo-tabs-pull-right">...</ul>

Sizes

Use numbered style classes to size up/down tab items.

<ul class="romo-tabs romo-tabs-small romo-push0-bottom">...</ul>
<ul class="romo-tabs romo-tabs4 romo-push0-bottom">...</ul>
<ul class="romo-tabs romo-push0-bottom">...</ul>
<ul class="romo-tabs romo-tabs1 romo-push0-bottom">...</ul>
<ul class="romo-tabs romo-tabs-large romo-push0-bottom">...</ul>
<ul class="romo-tabs romo-tabs2 romo-push0-bottom">...</ul>
<ul class="romo-tabs romo-tabs3 romo-push0-bottom">...</ul>

Stacked tabs

Tabs are horizontal by default. Add .romo-tabs-stacked to make them appear vertically stacked.

<ul class="romo-tabs romo-tabs-stacked">
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Use .active and .disabled just as you would on normal tabs.

<ul class="romo-tabs romo-tabs-stacked">
  <li class="active">...</li>
  <li>...</li>
  <li class="disabled">...</li>
</ul>

You can mix in non link items into the tabs.

<ul class="romo-tabs">
  <li><button class="romo-btn romo-push0-right">A button</button></li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Settings</a></li>
</ul>