Content
- Introduction.
- Initial Setup.
- Tailwind and AlpineJS Setup.
- Let's add HTML code.
- Conclusion and Full-Code.
Requirements
- Nodejs installed.
Introduction
A navigation menu is an essential part of any website. It provides users with a way to easily navigate between different pages and sections of the site. In this blog post, I would like to share with you my implementation of how to create a responsive navigation menu with Tailwind and Alpinejs.
What is Tailwind?
Tailwind is a utility-first CSS framework that allows you to quickly and easily style your websites. It provides a large library of pre-made classes that you can use to style your elements.
What is AlpineJS?
Alpinejs is a lightweight JavaScript framework that allows you to add interactivity to your websites. It provides a number of features that make it easy to add things like modals, tooltips, and animations to your site.
Why use Tailwind and AlpineJS together?
Tailwind and AlpineJS can be used together to build awesome website features without leaving the HTML code. This allows me to add styles and interactivity to my HTML code quickly and easily.
Allow me to show you
Initial Setup
I will use Vitejs (a build tool) to scaffold a new project. Now, I will open my terminal and type:
npm create vite@latest
Enter the project-name then choose "Vanilla" and "JavaScript" (for simplicity), after that i will install the dev-dependencies:
cd project-name
npm install
Tailwind and AlpineJS Setup
First, let's install Tailwind, back to the terminal:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This will generate tailwind.config.js
and postcss.config.js
files, edit tailwind.config.js
to look like this:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./main.js"],
theme: {
extend: {},
},
plugins: [],
}
Next open style.css
file then add:
@tailwind base;
@tailwind components;
@tailwind utilities;
Great! Now that the Tailwind setup is done, let's install Alpinejs and the @alpinejs/collapse
plugin, which will help to animate the menu show/hide
toggling with ease:
npm install alpinejs @alpinejs/collapse
Now, open main.js
file and add:
import './style.css';
import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';
Alpine.plugin(collapse);
Alpine.start();
The above code will load the @alpinejs/collapse
plugin, and initialize Alpine by calling Alpine.start()
.
Let's add HTML code
I will use Tailwind classes and Alpinejs x-data
directive within index.html
file to add styling and interactivity to the HTML element nav
:
<nav x-data="{open: false, toggle(){this.open = !this.open;}}">
<div
id="nav-box"
class="grid justify-items-center items-center
grid-cols-[max-content_1fr_max-content]"
>
<!-- bars btn -->
<div
id="bars-btn"
class="cursor-pointer md:hidden"
@click="toggle"
>
<img src="/bars.svg" alt="">
</div>
<!-- bars btn -->
<!-- logo -->
<div
id="logo"
class="md:col-start-1 md:col-end-2"
>
<img class="w-full max-w-[30rem]" src="/logo.svg" alt="">
</div>
<!-- logo -->
<!-- links-list -->
<div
id="list-links"
class="w-full
row-start-2 row-end-3 col-start-1 col-end-4
md:row-start-1 md:row-end-2 md:col-start-2 md:col-end-3"
>
<ul
class="md:px-4
text-4xl text-center font-regular capitalize
md:!flex md:justify-between md:!h-full"
x-show="open" x-collapse
>
<li class="py-6 md:py-0">
<a href="#" class="hover:font-bold">home</a>
</li>
<li class="py-6 md:py-0">
<a href="#" class="hover:font-bold">pricing</a>
</li>
<li class="py-6 md:py-0">
<a href="#" class="hover:font-bold">about us</a>
</li>
<li class="py-6 md:py-0">
<a href="#" class="hover:font-bold">contacts</a>
</li>
</ul>
</div>
<!-- links-list -->
<!-- search btn -->
<div
id="search-btn"
class="cursor-pointer"
>
<img src="/search.svg" alt="">
</div>
<!-- search btn -->
</div>
</nav>
Let me explain the above code:
- The HTML element
<nav />
was converted to an Alpine component by assigning a context object that contains 1 propopen
and 1 methodtoggle
to the Alpinex-data
directive. - Div
#bars-btn
click-event will trigger thetoggle
method, which will toggle the propopen
boolean valuetrue/false
. - The
<ul />
inside div#list-links
will consume theopen
prop through Alpine directivex-show
to toggle theshow/hide
effect, and that will be animated by usingx-collapse
directive came from Alpine-collapse-plugin. - Divs
#bars-btn
,#logo
,#list-links
and#search-btn
are wrapped by div#nav-box
CSS grid that will render its children inside three grid columnsmax-content
,1fr
andmax-content
. - The children elements of
#nav-box
will adapt the different screen sizes by using the following tailwind-classes:-
md:hidden
will hide Div#bars-btn
if the screen min-width size is 768px. -
md:col-start-1 md:col-end-2
will push#logo
div to take over the#bars-btn
div's position within the grid if the screen min-width size is 768px. -
row-start-2 row-end-3 col-start-1 col-end-4
will stretch#list-links
div from row-line 2 to row-line 3 and from column-line 1 to column-line 4, and if the screen min-width size is 768px, tailwind-classesmd:row-start-1 md:row-end-2 md:col-start-2 md:col-end-3
will stretch#list-links
div from row-line 1 to row-line 2 and from column-line 2 to column-line 3.
-
Conclusion
If you're like me and don't like to switch between files too much while coding, I'm sure you'll love using Tailwind and Alpinejs for building your next web site. They allow you to do a lot without leaving the HTML code.
They also have well-structured documentation that makes it easy to learn how to use them effectively.
Your feedback is greatly appreciated, thank you for reading.
Top comments (0)