fancy-tab

These modular elements can be readily used and customized in every layout across pages. See Full Documentation

Stylesheet

<link rel="stylesheet" href="assets/lib/fancy-tab/css/fancy-tab.min.css" />

JavaScript

<script src="assets/lib/fancy-tab/js/fancy-tab.min.js"></script>

HTML

<div class="fancy-tab">
  <div class="fancy-bar justify-content-center">
    <div class="fancy-bar-item active">
      <span class="fas fa-home"></span>
      <div class="mt-1">Home</div>
    </div>
    <div class="fancy-bar-item">
      <span class="fas fa-user-circle"></span>
      <div class="mt-1">Profile</div>
    </div>
    <div class="fancy-bar-item">
      <span class="fas fa-cog"></span>
      <div class="mt-1">Settings</div>
    </div>
  </div>
  <div class="fancy-tab-contents">
    <div class="fancy-tab-content active">
      <p class="lead">Duis ac facilisis mauris. Pellentesque leo tortor, maximus sed gravida dapibus, suscipit non nisi. Duis ultrices diam a maximus imperdiet. Nam eu purus a erat tristique ornare. Donec condimentum tristique diam eu congue.</p>
    </div>
    <div class="fancy-tab-content">
      <p class="lead">Nullam sed tempus mauris, vitae pretium nibh. Nam pretium diam id massa mollis pretium. Aenean lacus massa, tristique id mauris ac, sollicitudin auctor neque. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Nam luctus, sapien ligula finibus turpis.</p>
    </div>
    <div class="fancy-tab-content">
      <p class="lead">Vestibulum convallis diam id nibh tempus, ac scelerisque nulla congue. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Sed eu tellus pharetra, scelerisque nulla in, vehicula libero. Curabitur interdum nec metus ante sed luctus. </p>
    </div>
  </div>
</div>

Please report bugs and contribute at github.

• Repository
• Issues
• Projects