Sidebar Navigation Menu using Tailwind CSS | Beginners Guide to Tailwind CSS
HTML-код
- Опубликовано: 20 май 2024
- In this tutorial, you'll learn how to create a responsive sidebar navigation menu using Tailwind CSS. In this navigation, we have submenu items as well. Here we've added animation for a better user experience.
⦿ eCommerce Website Design with Tailwind CSS Tutorial • Design Responsive eCom...
⦿ Login Page in Next JS with Tailwind CSS Tutorial • Create Login Page in N...
⦿ Simple Responsive Navigation Menu with Tailwind CSS • Simple Responsive Navi...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
1:51 Creating the Project & Installing Packages
6:14 Create the Sidebar Navigation
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/
Hello Pradip, this tutorial is jam packed with knowledge, not only did i learn how to implement the toggle functionality the proper way but also these cool animations that we can add on to it. Keep it up! 👍
Simple, clear and robust. Awesome tutorial.
This is amazing! great design, good explanation and easy to follow. Thank you so much for this tutorial!
Thank You for these helpful video, I always use to watch your react native tutorial.
Thank you for the detailed guidance. It's easy to follow. Good job.
Simple and straight to the point. Thank you Pradip.
Great vid. Exactly what i needed. Thank you for sharing. Its a sub.
Great tutorial. Well explained. Just what I was looking for
Awesome side bar with cool translation, Awesome👍👍👍
Awesome tutorial. I try some way, but can not add the animation in the submenu level ("project") when expand it. It will be perfect if we could add animation when expand the submenu and make it smoothly
Would be awesome if you could provide the code. It would be much easier to test it out.
This is fantastic. thank you so much
Great tutorial. I'm using Vuejs but could easily follow the tailwind bit that I was interested in.
Awesome tutorial. Thank you!
Wonderful. Thank you for sharing this.
const Menus = [
{ title: "Dashboard" },
{ title: "Pages" },
{ title: "Media", spacing: true },
{
title: "Projects",
submenu: true,
submenuItems: [{ title: "Submenu 1" }, { title: "Submenu 2" }, { title: "Submenu 3" }],
},
{ title: "Analytics" },
{ title: "Profile", spacing: true },
{ title: "Setting" },
{ title: "Logout" },
];
10K claps for video content. Thanks for sharing!
Thanks for this great one.....❤
Excellent tutorial!
Thanks for your excellent tutorial.. was trying to implement smooth transition in one of the sidebar but was confused.. thanks to you
Man thank you your a great teACHER, curious I noticed you used the sequencer for drums, but can't I just play those softs via the
Thanks for the excellent tutorial!
thanks for this! really good tutorial
Really nice and helpful... Thanks!
Hi, thank you for this great tutorial, is there a way to do this without react and use just pure js and css? Thank you.
Awesome, thank you!
Great video!! Thanks a lot!!!
Great video. Thanks for sharing
simpl clear and super super
great stuff thank you very much
very very nice... Thank you
Add hover on the icons when minimized so that a user can know what the icon means, also do you have one for the top nav in Tailwind,and also which plugin are you using for Tailwind. Thanks
Thanks, I had to modify it a bit as I use Laravel/Livewire but the Tutorial is easily convertible to other platforms. Great job!
Thanks for sharing your use case!
Helpful Thankyou
merci beaucoup a toi :))
I think you are having wonderfull knowledge on front end ,Iam having good knowledge on javascript but not on css , so could you please suggest me a good way to get command on css
Very nice tutorial !! Thank you very much. How to make entire "Project" clickable instead of just arrow icon ? Please help
Great video as always, how about the mobile view of this sidebar?
Very Beautiful now Guyz let do one more thing add an on click function to your content side to set open to false. When you click anywhere in the mail page this will hide side sidebar for you automatically happy coding and you can do more depending on device size
Loved it!!
Thx you very muchhhhhhhh
Awesome Video ++++++++++++++++++++++++ 😃
Awesome
very nice
i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head
Hi - do you have the source code from this video somewhere? I could not find it in your github repos. Thanks!
It is good tutorial thank you but one thing to mention - it is not good to use boolean in sebMenuOpen since we can have more than one dropdown menu and it set to true it will open all the dropdown menus instead it is clear to use menu Id or name and then open according to name or ID. Despite that it is useful tutorial
Hi! , Thanks for the video!!! ... I found a simple Bug, it shows an error in console for the "Key" atribute , but it solves adding insted of the shorthand use the "Fragment" and adding the Key atribute on it like: insted of adding it on . Thanks again for the video!!!, please convert it on a Responsive mobile first sidebar!
Background-color doens't fill all elements if the size of elements is larger than the size of the screen. Need to do adjustments related to h-screen
its very simple and usefull
Thanks for liking
Good video , similar to me but I am using React js and tailwind css
Keep it up
Thanks to Code A Program for sharing the repo!!!
all workеd
20:09 where did you declare the element menu and index??
please did more videos like this
Sure. Thanks for your comment & support.
thank you bro
❤
Hiii bro in this video please add routing whis is must important for us as soon as possible
How to add routing in this menus
How about if we have 2 or much submenus? there's open all when I click one
I too bumped into this issue... found a solution? Please share...
Thank you, but i have a problem . if i have two menu has submenus when click on one, both of submenus open. how can i solve this
i had similar problem in a vue project. the way I solved it was to add a property to the sidebar links object of open: false. Whenerver I click on the link, I run a func that takes the index as a parameter and iterate through the links. if link !== sidebarLinks[index] i would set it's value to false, otherwise set to it's opposite. then you have to implement the collapse logic for the link the way you like, since i use vue it wouldn't apply to react
my problem is when menus have multiple dropdown and then all submenu is open
16:22 bookmark
from where can I get its code?
the font that you are using in the code it is really annoying try to use the normal font aside from this , good work thank you and goodluck .
BEEST!!!
How to place navigation links?
is there any repo bro?
Is this device responsive
Superb! It is interesting why when you choose w-18 instead of w-20 duration-300 not works. Thank you
Well... I found the issue. w-18 no exists in tailwind.
Where is code please send me
code please
eror in console
source code ?
where can i get the code of this...pls anyone can share it.
Iam asking same
need code
Post source code bro
Source code
how to make it scrollable on the menu?
I made h-fit instead of h-screen and the size of the sidebar became dynamic
@@vasudevg1165 thank you
What if there are multiple submenus, when sunmenuOpen = true all submenus are opened
Have you been able to fix this issue? If not i can show you my work around
@@Jazz__Dev Hi... Please share the workaround... many ppl are facing this issue...🙏
@@vasudevg1165 Not sure I'm following again please. Could you be more details regarding what the main issue is so that I can know where to look.
@@Jazz__Dev the issue of all submenus expanding when any top-level item is clicked
Hi, first of all thanks for the tutorial it was helpful :) But i need help because i did the submenu part but i have more than one category who has submenus . So when i click the arrow it runs all three categories' submenus. But i only want to see the one i clicked. Do you mind help me? Pls
Same problem
Me, too... did anyone find a way around the issue?
got the same problem