Skip to main content
ST FN

Sliding Navigation

This component can be used to create one or several navigation panels.

Demo

Click on the different buttons in the navbar to test this element.

Installation

Import the function into the JavaScript file of your project

import { SlidingNav } from "@overdog/fn"

Create and initialize an instance

The Instance Selector must wrap the button(s) that open your nav(s). If you only have one button, the selector must still be a parent of the button.

new SlidingNav("#nav-buttons-group", {
   // your options here
}).init()

Add the Tailwind variants to the plugins section of your config file.

Add the variants for Tailwind conditionally based on the value of your data-fn-nav-open attributes. You can adjust this. Only add the necessary variants (one per navigation panel).

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("nav-open-1", "[data-fn-nav-open='1'] &")
         addVariant("nav-open-2", "[data-fn-nav-open='2'] &") // only if needed
         addVariant("nav-open-3", "[data-fn-nav-open='3'] &") // only if needed
         addVariant("nav-open-sidepanel", "[data-fn-nav-open='sidepanel'] &") // only if needed
      })
   ]
}

Body scroll lock

For a 'body lock' effect that prevents scrolling when a menu is open, add one or more variants in this way.

addVariant("body-nav-open-1", "&[data-fn-nav-open='1']")
addVariant("body-nav-open-2", "&[data-fn-nav-open='2']") // another example
// add a variant for all the nav that needed to lock the scroll on body

Then, add the desired class to your body. You can also add a breakpoint prefix.

<body class="body-nav-open-1:overflow-hidden body-nav-open-2:overflow-hidden">

The body scroll lock is managed by the element to allow modifying the behavior according to the breakpoint and/or the navigation panel. For example, one panel could be full height with the scroll lock and another only 40vh with scrolling available."

Twig template Code

<div class="relative w-full h-16 z-40 bg-blue-500">
  <div id="nav-buttons-group" class="container flex items-center gap-4 h-full justify-end z-50 text-6">
    	<button data-fn-nav-button="1" class="rounded-full bg-white h-10 w-10"  type="button" aria-label="Button 1" aria-haspopup="true" aria-expanded="false">1</button>
    	<button data-fn-nav-button="2" class="rounded-full bg-white h-10 w-10"  type="button" aria-label="Button 2" aria-haspopup="true" aria-expanded="false">2</button>
    	<button data-fn-nav-button="3" class="rounded-full bg-white h-10 w-10"  type="button" aria-label="Button 3" aria-haspopup="true" aria-expanded="false">3</button>
  </div>
  <nav 
      data-fn-nav-panel="1"
      class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#2B3D4F]
         nav-open-1:translate-y-0 nav-open-1:transition-transform nav-open-1:duration-300 nav-open-1:ease-nav-in"
   >
   </nav>
   <nav 
      data-fn-nav-panel="2"
      class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#f1f1f1]
         nav-open-2:translate-y-0 nav-open-2:transition-transform nav-open-2:duration-300 nav-open-2:ease-nav-in"
   >
   </nav>
   <nav 
      data-fn-nav-panel="3"
      class="fixed z-30 top-0 left-0 w-full h-full -translate-y-full overflow-y-scroll overflow-x-hidden bg-[#e3e3e3]
         nav-open-3:translate-y-0 nav-open-3:transition-transform nav-open-3:duration-300 nav-open-3:ease-nav-in"
   >
   </nav>
</div>

Options