20+ jQuery Tab Bars - Free Code + Demos

Collection of 20+ jQuery Tab Bars. All items are 100% free and open-source.

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Tab Bar Menu Animation

jQuery Tab Bars - Tab Bar Menu Animation

Author: Doğukan Çavuş (dgknca)

Links: Source Code / Demo, Www.youtube.com

Created on: September 21, 2019

Made with: HTML, SCSS, Babel

Tags: tab-bar, tab-menu, tab

2. Liquid Tab Bar Animation

jQuery Tab Bars - Liquid Tab bar animation

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo

Created on: September 17, 2019

Made with: Pug, SCSS, JS

CSS Pre-processor: SCSS

JS Pre-processor: None

HTML Pre-processor: Pug

3. Transparent Fading Navigation Bar

jQuery Tab Bars - Transparent Fading Navigation Bar

Transparent Fading Navigation Bar with Mask Image

Author: MrPirrera (pirrera)

Links: Source Code / Demo, Dribbble Shot

Created on: August 23, 2014

Made with: HTML, CSS, JS

Tags: transparent, fading, navigation, menu

4. Fancy Tab Bar Active Animation

jQuery Tab Bars - Fancy tab bar active animation

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble Shot

Created on: August 21, 2019

Made with: HTML, SCSS, JS

Tags: tab, animation, mobile, menu, nav

5. 3D Tab Bar

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble.com

Created on: August 14, 2019

Made with: HTML, SCSS, JS

Tags: 3d, tab, bar, animation, menu

6. Login Bar

An animated login bar I have created. You can customize it just by changing the values of semantically created SASS variables, and use it in your projects!

Author: EGE ಠ_ಠ (macitege)

Links: Source Code / Demo

Created on: April 23, 2019

Made with: HTML, SCSS, JS

Tags: login, auth, login bar, auth bar, animated

7. Add File Tab Bar Animation

jQuery Tab Bars - Add file tab bar animation

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble Shot

Created on: December 20, 2018

Made with: HTML, SCSS, JS

8. Tab Bar Active Animation - CSS Only

jQuery Tab Bars - Tab bar active animation - CSS only

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble Shot

Created on: June 11, 2019

Made with: HTML, SCSS

9. Tab Bar Active Animation

jQuery Tab Bars - Tab bar active animation

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble Shot

Created on: October 18, 2018

Made with: HTML, SCSS, JS

Tags: tab-bar, active, animation, icons, particle

10. Tab Bar Interaction

Author: Zed Dash (z-)

Links: Source Code / Demo, Dribbble Shot

Created on: October 10, 2018

Made with: HTML, SCSS, JS

Tags: tab, animation

11. Fluid Tab Active State

jQuery Tab Bars - Fluid tab active state

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo, Dribbble Shots

Created on: February 22, 2017

Made with: HTML, Sass, JS

Tags: tabs, menu, jquery, bar

12. Tab Bar Active Animation

From https://dribbble.com/shots/5380015-WeChat-Tab-Bar-Redesign

Author: Aaron Iker (aaroniker)

Links: Source Code / Demo

Created on: October 18, 2018

Made with: HTML, SCSS, JS

Tags: tab-bar, active, animation, icons, particle

13. Mobile Tab Bar Animation

jQuery Tab Bars - Mobile Tab Bar Animation

Inspired by https://dribbble.com/shots/6745653-Simple-tab-bar

Author: Doğukan Çavuş (dgknca)

Links: Source Code / Demo

Created on: September 24, 2019

Made with: HTML, SCSS, Babel

Tags: tab-bar, tab-menu, mobile tab

14. Tab Bar Menu Animation

From this video https://www.youtube.com/watch?v=OVYsPQkOhyc ,,

Author: Nguyễn Đức Chiến (nguyenchienbg2k)

Links: Source Code / Demo

Created on: October 8, 2019

Made with: HTML, SCSS, Babel

Tags: tab-bar, tab-menu, tab

15. Tab Bar Animation

Author: Animation Bro (animationbro)

Links: Source Code / Demo

Created on: May 3, 2020

Made with: HTML, CSS, JS

Tags: tab bar animation, tab-bar, animation

16. Foldable Tab Bar

I saw a nice transition the other day on Into the Arctic (http://intothearctic.gp) - done by the excellent Hello Monday - and wanted to see what it would take to recreate. The use of transforms to reveal additional content was a really nice touch. A good opportunity to learn a little more ...

Read More

Author: teolee (teolee)

Links: Source Code / Demo

Created on: December 23, 2013

Made with: HTML, CSS, JS

Tags: tabs, css3, 3d, transition, transform