Macaw Tabs jQuery Plugin for CSS Tabs
Tags: css, jquery, responsive, accessible
Published: 2021-08-17 16:47:24

We are excited to launch lightweight and friendly jQuery plugin for HTML, CSS tabs. [Macaw Tabs](https://github.com/htmlcssfreebies/macaw-tabs) implements the W3 [design patterns for tabs](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel).

![Macaw Tabs jQuery Plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tixcak2ubtgvaxbjlpas.jpeg)

> Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel.

## Macaw Tabs jQuery Plugin

Here are some major features of [Macaw Tabs jQuery Plugin](https://github.com/htmlcssfreebies/macaw-tabs),

* Flexible HTML Structure
* Vertical Orientation Support
* Horizontal Orientation Support
* Tabs with Automatic Activation Support
* Tabs with Manual Activation Support
* Nested Tabs Support
* Special Transition Class for Tab Panels
* Keyboard Interaction Support
* AI-ARIA Roles, States, and Properties Support
* Lot of Tabs Themes

Please see the [Macaw Tabs](https://htmlcssfreebies.com/macaw-tabs/) project page for Setup and Documentation.

## Macaw Tabs Themes

We have launched some cool [CSS Tabs](https://htmlcssfreebies.com/tag/macaw-tabs/) of Macaw Tabs jQuery Plugin for startup.

### Macaw Simple Tabs

Macaw Simple Tabs has vibrant colors. Design is enhanced with [Font Awesome Icons](https://fontawesome.com/).

![Macaw Simple Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukbvuh1fmmmzyaucc6im.jpg)

* [Demo](https://htmlcssfreebies.com/macaw-simple-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/abWrXBq)

### Macaw Silk Tabs

Macaw Silk Tabs has clean look. Design is enhanced with [Google Material Icons](https://fonts.google.com/icons).

![Macaw Silk Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1p28ytynqgl573280ds.jpeg)

* [Demo](https://htmlcssfreebies.com/macaw-silk-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/LYyoqVm)

### Macaw Power Tabs

Macaw Power Tabs has minimalistic interface. Design is enhanced with [Google Material Icons](https://fonts.google.com/icons).

![Macaw Power Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w86d17x3ngdkwov1g0h.jpeg)

* [Demo](https://htmlcssfreebies.com/macaw-power-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/eYWabxd)

### Macaw Fresh Tabs

Macaw Fresh Tabs has vertical orientation on both small and big displays. Design is enhanced with [Google Material Icons](https://fonts.google.com/icons).

![Macaw Fresh Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heb1cicei189zcyv1fow.jpeg)

* [Demo](https://htmlcssfreebies.com/macaw-fresh-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/qBmGLRr)

### Macaw Elegant Tabs

Macaw Elegant Tabs has simple yet elegant interface. Design is enhanced with [Google Material Icons](https://fonts.google.com/icons).

![Macaw Elegant Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw5rsip87cmb8ygguiru.jpeg)

* [Demo](https://htmlcssfreebies.com/macaw-elegant-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/ZEKNmbj)

### Macaw Aurora Tabs

Macaw Aurora Tabs has beautiful interface. It uses [Animate.css](https://animate.style/) library for tab panel animations. You can play around to match your taste.

![Macaw Aurora Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsch0y5tz1xhu6aogxsx.jpeg)

* [Demo](https://htmlcssfreebies.com/macaw-aurora-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/qBmeRag)

### Macaw Comely Nested Tabs

Macaw Comely Nested Tabs are fabulous example of [CSS nested tabs](https://htmlcssfreebies.com/tag/nested-tabs/).

![Macaw Comely Nested Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9cmdf2rv8j5jj2wwz3r.jpg)

* [Demo](https://htmlcssfreebies.com/macaw-comely-nested-tabs/)
* [Playground](https://codepen.io/htmlcssfreebies/pen/KKqNgWB)

## Support the Project

We welcome Dev community to support the [Macaw Tabs](https://github.com/htmlcssfreebies/macaw-tabs) project. You can contribute,

* To improve the Macaw Tabs plugin.
* To add more Macaw Tabs themes.

Don't forget to give **Star** at [Github Page](https://github.com/htmlcssfreebies/macaw-tabs) :)
Looking forward for your comments <3