Functionality

In this section, we'll explore advanced styling techniques with TailGrids to customize the appearance of your UI components.

Some TailGrids UI components require changes in JS code and classes for interactivity. We utilize Alpine.js for HTML components with interactivity, such as a Carousel, Popup, dropdown, etc.

Different approaches are used for the functionality of React and Vue components. Let's Explore.

Key Functionality Examples

TailGrids often provides components with built-in interactions, such as:

Modals
Dropdowns
Tabs
Toggles
Accordions
Tooltips
Sticky Navigation

Understanding Framework Differences

The way you implement and interact with interactive components in TailGrids is different for the framework:

HTML: TailGrids primarily utilizes Alpine.js to add direct interactivity within HTML components.
React and Vue: TailGrids components for these frameworks integrate seamlessly with their respective patterns for:
- State management (React Hooks, Redux, Vue reactivity system).
- Event handling (React's event handlers, Vue's v-on directives).

Alpine.js configuration

For HTML, Here is the CDN link; add this to the head tag:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

If you want, you can host and load Alpine.js locally.

Sticky Navbars

Let’s learn how to achieve sticky navbar functionality for different frameworks.

For HTML

Add a few JS codes and conditional CSS classes to make the navbar sticky in TailGrids HTML components. Since we already created those classes, you can copy-paste them depending on your needs.

Add this code snippet to your body tag to make the navbar sticky.

<body
  x-data="
      {
        scrolledFromTop: false
      }
    "
  x-init="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"
  @scroll.window="window.pageYOffset >= 50 ? scrolledFromTop = true : scrolledFromTop = false"
>
  ....
</body>

By default, the header tag is set to position absolute. You have to remove the absolute class class="absolute top-0 left-0 z-50 w-full" and add the code below

class="fixed z-50 flex items-center w-full bg-white dark:bg-dark"
:class="scrolledfromtop ? ' bg-white bg-opacity-80 shadow-sm backdrop-blur-sm' :
'absolute' " ;

Note: You can change the bg-color or any other classes if needed.

For React

Here's a straightforward step-by-step guide to enable a sticky navbar.

Step #1: Import useState and useEffect

At the top of your file, import useState and useEffect from React.

import React, { useState, useEffect } from "react";

Step #2: Add State for Navbar Open and Sticky

Inside your Navbar component, initialize state variables to manage whether the Navbar is open or closed and whether it should be sticky.

const [open, setOpen] = useState(false);
const [sticky, setSticky] = useState(false);

Step #3: Define Toggle and Sticky Functions

Define functions to toggle the navbar open/closed and to handle the sticky behavior based on the scroll position.

const handleNavbarToggle = () => {
  setOpen(!open);
};
 
const handleStickyNavbar = () => {
  if (window.scrollY >= 80) {
    setSticky(true);
  } else {
    setSticky(false);
  }
};

Step #4: Add Scroll Event Listener

Use the useEffect hook to add a scroll event listener when the component mounts.

useEffect(() => {
  window.addEventListener("scroll", handleStickyNavbar);
  return () => {
    window.removeEventListener("scroll", handleStickyNavbar);
  };
}, []);

Step #5: Apply Sticky Class

Update the <header> class of the navbar based on the sticky state. We will include the styles for making the navbar sticky.

<header
  className={`flex w-full items-center bg-white dark:bg-dark ${
    sticky && "sticky top-0 z-50"
  }`}
>
  {/* Navbar content */}
</header>

So, the final code will look like this if you use the “Navbar Style 1” component of TailGrids.

import React, { useState, useEffect } from "react";
 
const Navbar = () => {
  const [open, setOpen] = useState(false);
  const [sticky, setSticky] = useState(false);
 
  const handleNavbarToggle = () => {
    setOpen(!open);
  };
 
  const handleStickyNavbar = () => {
    if (window.scrollY >= 80) {
      setSticky(true);
    } else {
      setSticky(false);
    }
  };
 
  useEffect(() => {
    window.addEventListener("scroll", handleStickyNavbar);
    return () => {
      window.removeEventListener("scroll", handleStickyNavbar);
    };
  }, []);
 
  return (
    <header
      className={`flex w-full items-center bg-white dark:bg-dark ${
        sticky && "sticky top-0 z-50"
      }`}
    >
      <div className="container">{/* Your Navbar content */}</div>
    </header>
  );
};
 
export default Navbar;
 
/* Your Navbar ListItem content */

That’s it. Save your changes and test your navbar. Scroll down the page to see if the navbar becomes sticky.

For Vue

Here's a straightforward step-by-step guide to enabling a sticky Vue Components navbar.

Step #1: Import Necessary Vue Composition API Functions

Import the required Vue composition API functions

import { onMounted, onUnmounted, ref, computed } from "vue";

Step #2: Initialize Sticky State

Create a reactive reference variable sticky to track the sticky state of the navbar.

const sticky = ref(false);

Step #3: Define Sticky Navbar Handler

Define a function handleStickyNavbar to toggle the sticky state based on the scroll position.

const handleStickyNavbar = () => {
  sticky.value = window.scrollY >= 80;
};

Step #4: Add Scroll Event Listener

Attach the handleStickyNavbar function to the scroll event when the component is mounted and remove it when it is unmounted.

onMounted(() => {
  window.addEventListener("scroll", handleStickyNavbar);
});
 
onUnmounted(() => {
  window.removeEventListener("scroll", handleStickyNavbar);
});

Step #5: Compute Navbar Classes

Create a computed property navbarClasses to dynamically compute the CSS classes for the navbar based on the sticky state.

const navbarClasses = computed(() => {
  return {
    sticky: sticky.value,
    "left-0": true,
    "top-0": true,
    "z-50": true,
    "w-full": true,
    "bg-white": true,
    "dark:bg-dark": true,
    "bg-opacity-80": sticky.value,
    "shadow-sm": sticky.value,
    "backdrop-blur-sm": sticky.value,
    "dark:bg-opacity-80": sticky.value,
  };
});

Step #6: Apply Navbar Classes in Template

Use the :class directive to apply the computed navbar classes to the <header> element. This enables the sticky behavior based on the scroll position.

<header :class="navbarClasses">
  <!-- Your navbar content here -->
</header>

So, the final code will look like this if you use the “Navbar Style 1” Vue component.

<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed } from 'vue'
 
 
// Your Component Code //
 
 
// Sticky NavBar Code
const navbarOpen = ref(false)
const sticky = ref(false);
 
const handleNavbarToggle = ()=>{
  navbarOpen.value = !navbarOpen.value;
}
 
const handleStickyNavbar = () => {
  sticky.value = window.scrollY >= 80;
};
 
onMounted(() => {
  window.addEventListener("scroll", handleStickyNavbar);
});
 
onUnmounted(() => {
  window.removeEventListener("scroll", handleStickyNavbar);
});
 
const navbarClasses = computed(() => {
  return {
    'sticky': sticky.value,
    'left-0': true,
    'top-0': true,
    'z-50': true,
    'w-full': true,
    'bg-white': true,
    'dark:bg-dark': true,
    'bg-opacity-80': sticky.value,
    'shadow-sm': sticky.value,
    'backdrop-blur-sm': sticky.value,
    'dark:bg-opacity-80': sticky.value
  };
});
</script>
 
<template>
  <header :class="navbarClasses">
 <!-- Rest of Component Code -->

That’s it. Save your changes and test your navbar. Scroll down the page to see if the navbar becomes sticky.

Let's create dynamic and engaging interfaces with TailGrids!

Styling & Customization Figma