Customizable CSS
search

Navs and Tabs

Basic Nav

you can use .nav class to create menus and navigations

<ul class="nav" > 
  <li class="nav-item">
    <a  href="#" class="nav-link">Link a</a>
  </li>
  <li class="nav-item">
    <a  href="#" class="nav-link">Link a</a>
  </li>
  <li class="nav-item">
    <a  href="#" class="nav-link">Link a</a>
  </li>
</ul>

Horizontal Nav

You can change the direction of the nav by adding the class .horizontal

<ul class="nav horizontal" > 
  ...
</ul>

You can use nav as breadcrumbs by ading the class .breadcrumbs, you can also add the class .is-active to a .nav-link in order show the current position of the breadcrumb.

<ul class="nav breadcrumbs" > 
  <li class="nav-item">
    <a  href="#" class="nav-link">Link a</a>
  </li>
  <li class="nav-item">
    <a  href="#" class="nav-link">Link a</a>
  </li>
  <li class="nav-item">
    <a  href="#" class="nav-link">Link a</a>
  </li>
</ul>

Tabs

Basic tabs

You can create tabs by adding the class .tabs into a .nav component

<ul class="nav tabs">
    <li class="nav-item">
        <a href="" class="nav-link">Link a</a>
    </li>
    <li class="nav-item">
        <a href="" class="nav-link">Link b</a>
    </li>
    <li class="nav-item active">
        <a href="" class="nav-link is-active">Link c</a>
    </li>
</ul>

Tabs Position

you can change the poition of the tabs by using the flexbox utilities classes .justify-

<ul class="nav tabs">
  ...
</ul>
<ul class="nav tabs justify-center">
  ...
</ul>
<ul class="nav tabs justify-end">
  ...
</ul>

Tabs full

You can make tabs to use the full width of its container by adding the class .full

<ul class="nav tabs full">
  ...
</ul>

Outlined Tabs

you can change the style of tabs to outline by adding the class .outline

<ul class="nav tabs outline">
  ...
</ul>

On this page

Site

Support

Customizable CSS By Haniel Hernández. 2021