Accessible Responsive Tabs Plugin - jQuery Macaw Tabs

Macaw Tabs is a tiny and easy-to-use jQuery plugin for creating responsive, accessible, animated, nice-looking tabs UI on the webpage.

Users can navigate between tabs using Arrow keys and display corresponding tab panels by pressing Space or Enter.

In addition, the plugin automatically changes the layout to verticle on small screen devices (like mobile and tablet).

How to use it:

1. Download and include the Macaw Tabs plugin's files.

<!-- Aurora Theme -->
<link rel="stylesheet" href="./dist/css/macaw-aurora-tabs.css" />
<!-- Elegant Theme -->
<link rel="stylesheet" href="./dist/css/macaw-elegant-tabs.css" />
<!-- Fresh Theme -->
<link rel="stylesheet" href="./dist/css/macaw-fresh-tabs.css" />
<!-- Power Theme -->
<link rel="stylesheet" href="./dist/css/macaw-power-tabs.css" />
<!-- Silk Theme -->
<link rel="stylesheet" href="./dist/css/macaw-silk-tabs.css" />
<!-- Simple Theme -->
<link rel="stylesheet" href="./dist/css/macaw-simple-tabs.css" />

<!-- JavaScript -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./dist/js/macaw-tabs.js"></script>

2. The required HTML structure for the tabs ui. Don't forget to add accessibility information to tabs & tab panels using role and aria attributes:

<div class="macaw-tabs macaw-elegant-tabs">
  <div role="tablist" aria-label="Resources">
    <button role="tab" aria-selected="true" aria-controls="blog-tab" id="blog">
      <span class="label">Blog</span>
    </button>
    <button role="tab" aria-selected="false" aria-controls="events-tab" id="events" tabindex="-1">
      <span class="label">Events</span>
    </button>
    <button role="tab" aria-selected="false" aria-controls="deals-tab" id="deals" tabindex="-1">
      <span class="label">Deals</span>
    </button>
    <button role="tab" aria-selected="false" aria-controls="support-tab" id="support" tabindex="-1">
      <span class="label">Support</span>
    </button>
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="blog" id="blog-tab">
    Tab Panel 1
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="events" id="events-tab" hidden>
    Tab Panel 2
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="deals" id="deals-tab" hidden>
    Tab Panel 3
  </div>
  <div tabindex="0" role="tabpanel" aria-labelledby="support" id="support-tab" hidden>
    Tab Panel 4
  </div>
</div>

3. Initialize the plugin to activate the tabs ui.

$(function(){
  $('.macaw-tabs').macawTabs();
});

4. Set the max screen size at which point the plugin change the layout to 'Vertical'. Default: '575px'.

$('.macaw-tabs').macawTabs({
  autoVerticalOrientation: true,
  autoVerticalOrientationMaxWidth: '575px',
});

5. Config the transition effect when navigating between tabs.

$('.macaw-tabs').macawTabs({
  tabPanelTransitionLogic: true,
  tabPanelTransitionClass: 'active',
  tabPanelTransitionTimeout: 0,
  tabPanelTransitionTimeoutDuration: 50,
});

6. Perform a callback function after the tabs have actiaved.

$('.macaw-tabs').macawTabs({
  onTabActivation() {
    // do something
  },
});

Changelog:

v1.0.4 (2021-09-06)

• Update

v1.0.2 (2021-08-20)

• Aurora Tabs Theme Added.

v1.0.0 (2021-08-17)

• Added more themes

---

This awesome jQuery plugin is developed by htmlcssfreebies. For more Advanced Usages, please check the demo page or visit the official website.