[NEW PLUGIN] - Tabby Nav | Advanced Keyboard Controlled Navigation

Showcase Plugins
1

TABBY NAV
DEMO | EDITOR | PLUGIN PAGE | DOCUMENTATION | WEBSITE | DISCORD

Created by @GH5T.

What is it?

A highly customizable tab-orientated tab navigator. Has keyboard support, can be persistent on page reload, and has very simple actions for triggers.

  • Endless navigation.
  • States for your tab name and index.
  • Persistent on page reload.
  • Tab switch trigger.
  • Fully customizable.

Use Cases

  • Setup a pricing selection switcher (why I did this initially)
  • Easily switch between panes on a page, and use this elements states to change the behaviors of said page.
  • Use it for inner-navigation menus.
  • Quick and easy tabs for any “tab-type” element.

This is made purely with vanilla JavaScript and CSS. It is very light-weight and super easy to use.
SigIEImOVK

Updates to come:

  • Hover tab triggers
  • icons inside tabs.
2

updates baby

Made the demo more exciting and added many hotfixes. Now you can modify any anything dynamically. You are also able to make your own various styles that can change the way your site works completely. The demo shows you multiple ways to do so. Please let me know if you have questions!

sSjeFjtovj

Hover updates are next to come (but you can add it with css for now). I’ll add examples with the CSS way later, but it’s very simple:

#tabby-glider-3 { background-color: #038387 !important; }
You do this for each glider, and you can update the styling so easily. This is also how you would add trigger effects too. You can use Scoper via my Toolkit to do that.

  • Bonus points if you press the “meow” button at the end! Who knows what’ll happen :slight_smile: