Ace Admin Docs
🔍
‹ ›

Tabs

For information about tabs please refer to Bootstrap's documentation.

Styling & Position

Tabs can be above, on right or on left of the content.
You can disable the extra positions in ace-features.scss by changing $tabs-left, etc to false:

html 
<ul class="nav nav-tabs" role="tablist">
  ...
</ul>

<div class="tab-content">
  ...
</div>

To use other tabs positions such as .tabs-left, etc, you just need to change the parent class name:

html 
<div class="tabs-left">
  <ul class="nav nav-tabs" role="tablist">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Tab Options

.nav-tabs-detached: Tab buttons will be detached from .tab-content (as in the Bike, Train, Car, etc example)

Simple Tabs

Add .nav-tabs-simple for simple style tabs and you can use custom border color for .active item:

html 
<ul class="nav nav-tabs nav-tabs-simple">
  <li class="nav-item">
    <a href="#" class="nav-link brc-danger" ...>
        ...
    </a>
  </li>

  <li class="nav-item">
    <a href="#" class="nav-link brc-success" ...>
        ...
    </a>
  </li>
</ul>

You can also use Dynamic Styling to show/hide an icon or text when a tab button becomes .active or inactive:

html 
<li class="nav-item">
    <a href="#" class="nav-link brc-success d-style" ...>
        <i class="fa fa-home text-grey-l2 d-n-active"></i>
        <i class="fa fa-home text-success-m1 d-active"></i>
        Home
    </a>
</li>

Custom Styles

You can use .btn classes instead of .nav-link for custom tab buttons:
Custom Tabs

html 
<ul class="nav nav-tabs bgc-secondary-l2 border-y-1 brc-secondary-l2" role="tablist">
  <li class="nav-item mr-2px">
    <a id="home1-tab-btn"
       class="d-style active btn btn-tp btn-light-secondary btn-h-white btn-a-text-dark btn-a-white px-3 px-sm-4 py-25 radius-0 border-0"
       data-toggle="tab" href="#tab1" role="tab" aria-controls="home1" aria-selected="true">
        <span class="v-active position-tl w-100 border-t-3 brc-green mt-n3px"></span><!-- when .active show a green border on top -->
        Home
    </a>
  </li>
  .
  .
  .
</ul>

Sliding Tabs

Enable sliding tab panes by adding .tab-sliding to the .tab-content.
.tab-pane elements shouldn't have .fade any more:

html 
<div class="tab-content tab-sliding px-0">
  <div class="tab-pane active show px-2" id="tab-1">
    ...
  </div>

  <div class="tab-pane px-2" id="tab-2">
    ...
  </div>
</div>

If you add .mh-none (max-height: none) class to .tab-pane , the .tab-content instantly becomes as tall as the newly active tab

Swipe options

  • data-swipe: If set to none, swiping will be disabled. If set to right or left only swiping right/left will be allowed
html 
<div class="tab-content tab-sliding px-0" data-swipe="none">
 ...
</div>
  • data-swipe-prev and data-swipe-next: Can be used to specify the previous or next tab pane when swiping a tab pane:
html 
<div class="tab-pane px-2" id="tab-4" data-swipe-prev="#tab-1">
<!-- swiping #tab-4 to right will show #tab-1 instead of #tab-3 -->
</div>

These options are used in login page which contains 3 tab panes for login , signup and forgot sections.
When inside signup and forgot you can only swipe back to login.

On page load, swiping gestures are enabled for existing tabs.
If you add a set of tabs later and want to enable swiping for them, you can use the aceTabSwipe function:

js 
$('#my-tab-content.tab-content').aceTabSwipe()

Scrollable Tab Buttons

Scrollable Tabs
In small devices, tab buttons may not fit in available space. They can either be wrapped or made scrollable by using the following options:

When a tab button is clicked, .nav element is scrolled for that button to come into center:

html 
<ul class="nav nav-tabs nav-justified nav-tabs-scroll">
 ...
</ul>

.is-scrollable

This will make the tabs scrollable. You can swipe the buttons right or left:

html 
<ul class="nav nav-tabs nav-justified nav-tabs-scroll is-scrollable">
 ...
</ul>

Add .is-scrollbar-shown to make scrollbars visible.

On page load, scrolling is enabled for existing tabs.
If you add a set of tabs later and want to enable scrolling for them, you can use the aceTabScroll function:

js 
$('#my-scrollable-nav-tabs').aceTabScroll()

.sticky-nav elements stick to page's top or below navbar (if navbar is fixed):

html 
<div class="sticky-nav">
   <ul class="nav nav-tabs page-nav-tabs nav-tabs-boxed nav-justified nav-tabs-scroll is-scrollable" role="tablist">
     ...
   </ul>
</div>

<div class="tab-content">
 ...
</div>

In order for an element to have position: sticky, its parents should be overflow: visible .
Therefore in Ace's demo in pages that have .sticky-nav, I disable overflow: hidden for .body-container dynamically but you should do that in CSS, if you have a sticky element on all of your pages:

js 
$('.body-container').css('overflow', 'visible') // for sticky to work

Also when sidebar is .sidebar-push , .main-content has overflow-x: hidden and you can't have sticky nav

Removing overflow: hidden from .body-container, sometimes causes unwanted horizontal scrollbars for body if an element is wider than window size.
Make sure to check for that and modify/re-structure your elements to fit in window area properly

Sometimes when document scrolls and an element becomes stuck/unstuck, you want to change its styling.
For that, you can listen to the custom sticky-change event:

js 
var stickyNav = document.querySelector('.sticky-nav');
stickyNav.addEventListener('sticky-change', function(e) {
  stickyNav.classList.toggle('is-stuck', e.detail.isSticky)
  // var myNav = stickyNav.querySelector('.nav-tabs')
  if (e.detail.isSticky) {
    // if stuck do something    
    // myNav.classList.add('bgc-white-tp1');
  }
  else {
    // if not stuck undo the thing
    // myNav.classList.remove('bgc-white-tp1');
  }
})

See views/pages/page-profile/@page-script.js for more of an example

On page load, sticky nav is enabled for existing tabs.
If you add a set of tabs (or other element) later and want to enable sticky events for them, you can use the aceStickyNav function:

js 
$('#my-sticky-nav').aceStickyNav()

Responsive Sticky Nav

You can have sticky navs for smaller devices only:

  • .sticky-nav-sm will become sticky only below sm size
  • .sticky-nav-md will become sticky only below md size
  • .sticky-nav-lg will become sticky only below lg size
  • .sticky-nav-xl will become sticky only below xl size
html 
<div class="sticky-nav-md">
 <!-- becomes sticky only below md size -->
</div>

Remember for sticky to work, .body-container cannot have overflow: hidden

js 
var stickyNav = document.querySelector('[class*="sticky-nav"]');
stickyNav.addEventListener('sticky-change', function(e) {
  if (e.detail.isSticky) {
    // if stuck do something
  }
  else {
    // if not sticky undo the thing
  }
})

All above sticky classes work on table header (thead) as well.

Tooltips & Popovers Accordions
↑