logo

Adding functionality with AlpineJS

A few TailGrids UI Components requires JS for interactivity. As Tailwind CSS prefer and love AlpineJS we used AlpineJS for interactivity like: Carousel, Popup, dropdown etc.

If a component requires AlpineJS you have to just linkup the AlpineJS script at head tag. We also added notice on individual components page as notice. Here is the CDN link:

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

of AlpineJS, you can host and load locally too.

Sticky Navbar

If you want to achieve sticky navbar on your site you have to add a few JS code and conditional CSS classes. Since we already created these classes you no need to worry. Just copy-paste depending on your needs.

At the beginning body tag you have to add these codes for setting up the sticky navbar.

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

and for header tag by default, we used position absolute. You have to remove the absolute class and add the code below.

:class="scrolledfromtop ? 'fixed z-50 bg-white bg-opacity-80 shadow-sm
backdrop-blur-sm' : 'absolute' " ;

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