Sidebar Navigation Menu using Tailwind CSS | Beginners Guide to Tailwind CSS
HTML-код
- Опубликовано: 16 май 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/
Simple, clear and robust. Awesome tutorial.
This is amazing! great design, good explanation and easy to follow. Thank you so much for this tutorial!
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! 👍
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.
Great tutorial. Well explained. Just what I was looking for
Simple and straight to the point. Thank you Pradip.
Great vid. Exactly what i needed. Thank you for sharing. Its a sub.
Awesome side bar with cool translation, Awesome👍👍👍
Awesome tutorial. Thank you!
Great tutorial. I'm using Vuejs but could easily follow the tailwind bit that I was interested in.
10K claps for video content. Thanks for sharing!
Wonderful. Thank you for sharing this.
This is fantastic. thank you so much
Thanks for the excellent tutorial!
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 this! really good tutorial
Thanks for this great one.....❤
Really nice and helpful... Thanks!
Awesome, thank you!
Great video!! Thanks a lot!!!
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
Loved it!!
Very nice tutorial !! Thank you very much. How to make entire "Project" clickable instead of just arrow icon ? Please help
great stuff thank you very much
Great video as always, how about the mobile view of this sidebar?
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.
Great video. Thanks for sharing
Helpful Thankyou
simpl clear and super super
very very nice... Thank you
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
You make great videos, keep it up!
Glad you like them!
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
merci beaucoup a toi :))
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!
Would be awesome if you could provide the code. It would be much easier to test it out.
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
Awesome
Thx you very muchhhhhhhh
Awesome Video ++++++++++++++++++++++++ 😃
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" },
];
very nice
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
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!!!
Hi - do you have the source code from this video somewhere? I could not find it in your github repos. Thanks!
thank you bro
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
its very simple and usefull
Thanks for liking
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
all workеd
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!
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, 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
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...
BEEST!!!
from where can I get its code?
Hiii bro in this video please add routing whis is must important for us as soon as possible
How to place navigation links?
my problem is when menus have multiple dropdown and then all submenu is open
is there any repo bro?
Is this device responsive
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 .
16:22 bookmark
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.
code please
source code ?
where can i get the code of this...pls anyone can share it.
Iam asking same
Where is code please send me
eror in console
need 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
Source code
Post source code bro
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