Lightweight Pure JavaScript Tabs With URL Persistence – Tabzy.js

Preview:

Description:

Tabzy.js is a lightweight, dependency-free JavaScript library for creating customizable tabs navigation on your webpage.

It comes with a URL state persistence feature that improves user navigation by maintaining tab context. When users bookmark pages or share links, they’ll return to the specific tab view they were previously viewing. This can be useful in documentation sites, product detail pages, and multi-step forms.

How to use it:

1. Download the package and load the Tabzy’s files in your HTML document.

<link rel="stylesheet" href="tabzy.min.css">
<script src="tabzy.min.js"></script>

2. Set up your basic tab structure in HTML:

<ul id="my-tabs">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">Content for Tab 1</div>
<div id="tab2" hidden>Content for Tab 2</div>
<div id="tab3">Content for Tab 3</div>

3. Initialize Tabzy.js with default options.

const tabs = new Tabzy('#my-tabs', {
  // options here
});

4. Apply your own CSS styles to the tabs.

:root {
  --primary: #1ca595;
}
.tabzy-wrapper {
  position: relative;
}
.tabzy-tabs {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e0e0e0;
}
.tabzy-tabs li {
  position: relative;
}
.tabzy-tabs a {
  text-decoration: none;
  color: #555;
  padding: 10px 20px;
  display: block;
  transition: color 0.3s ease;
}
.tabzy-tabs a:hover {
  color: var(--primary);
}
.tabzy-tabs .tabzy--active a {
  color: var(--primary);
}
.tabzy-tabs:not(.sliding) .tabzy--active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
}
.active-line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary);
  transition: transform 0.3s ease, width 0.3s ease;
}
.tabzy-panel {
  padding: 25px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}

5. Initialize Tabzy.js with default options.

const tabs = new Tabzy('#my-tabs', {
  // options here
});

6. Available configuration options.

• activeClassName: defines the CSS class applied to active tabs.
• remember: enables URL state persistence.
• onChange: executes when users switch tabs

const tabs = new Tabzy('#my-tabs', {
  activeClassName: 'tabzy--active',
  remember: true,
  onChange: ({ tab, panel }) => {
    console.log(`Switched to ${tab.textContent}`);
  }
});

7. Tabzy also provides JavaScript methods for programmatic control. Use tabs.switch(target) to change tabs via code, passing either a selector string or tab element. The tabs.destroy() method removes all event listeners and restores the original HTML structure when needed.

How it works:

Tabzy.js initializes by scanning the DOM for tab links and their associated content panels. It tracks active tabs using CSS classes and toggles panel visibility through the hidden attribute.