KZhead

Sidebar Navigation Menu using Tailwind CSS | Beginners Guide to Tailwind CSS

Pradip Debnath
2024 ж. 24 Мам.
111 904 Рет қаралды
Жүктеу

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! 👍

    @vardaanagarwal3629@vardaanagarwal3629 Жыл бұрын

  • Simple, clear and robust. Awesome tutorial.

    @waltergomero@waltergomero Жыл бұрын

  • This is amazing! great design, good explanation and easy to follow. Thank you so much for this tutorial!

    @julienheng3880@julienheng3880 Жыл бұрын

  • Thank You for these helpful video, I always use to watch your react native tutorial.

    @techyvivekraj@techyvivekraj2 жыл бұрын

  • Thank you for the detailed guidance. It's easy to follow. Good job.

    @ChauNguyenRVC@ChauNguyenRVC4 ай бұрын

  • Great tutorial. Well explained. Just what I was looking for

    @phil5293@phil52936 ай бұрын

  • Simple and straight to the point. Thank you Pradip.

    @oluwaseunladeinde410@oluwaseunladeinde41021 күн бұрын

  • Awesome side bar with cool translation, Awesome👍👍👍

    @josphat.Karanja@josphat.Karanja Жыл бұрын

  • Great vid. Exactly what i needed. Thank you for sharing. Its a sub.

    @mtsurov@mtsurov Жыл бұрын

  • Awesome tutorial. Thank you!

    @tamimazizadah@tamimazizadah Жыл бұрын

  • Great tutorial. I'm using Vuejs but could easily follow the tailwind bit that I was interested in.

    @xxic.@xxic.11 ай бұрын

  • Thanks for your excellent tutorial.. was trying to implement smooth transition in one of the sidebar but was confused.. thanks to you

    @dart_ariz604@dart_ariz60417 күн бұрын

  • Wonderful. Thank you for sharing this.

    @maghani.official@maghani.official Жыл бұрын

  • Thanks for the excellent tutorial!

    @saurabh75prakash@saurabh75prakash14 күн бұрын

  • Excellent tutorial!

    @bassam.2023@bassam.2023 Жыл бұрын

  • Really nice and helpful... Thanks!

    @ehmztangpuz706@ehmztangpuz706 Жыл бұрын

  • Great video!! Thanks a lot!!!

    @eltonchavez@eltonchavez Жыл бұрын

  • 10K claps for video content. Thanks for sharing!

    @juanmamani2110@juanmamani211011 ай бұрын

  • Awesome, thank you!

    @mayit4me@mayit4me Жыл бұрын

  • thanks for this! really good tutorial

    @gwulfwud@gwulfwud4 ай бұрын

  • This is fantastic. thank you so much

    @serverupdate@serverupdate8 ай бұрын

  • Great video. Thanks for sharing

    @ralphmoran@ralphmoran8 күн бұрын

  • Thanks for this great one.....❤

    @md.khairulalam197@md.khairulalam1979 ай бұрын

  • Thanks, I had to modify it a bit as I use Laravel/Livewire but the Tutorial is easily convertible to other platforms. Great job!

    @galindoxrafa@galindoxrafaАй бұрын

    • Thanks for sharing your use case!

      @itzpradip@itzpradip25 күн бұрын

  • great stuff thank you very much

    @_elguet5787@_elguet5787 Жыл бұрын

  • Loved it!!

    @LautaroGruss@LautaroGruss Жыл бұрын

  • 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" }, ];

    @roebienarnaiz@roebienarnaiz Жыл бұрын

  • 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

    @rainbowcarTV@rainbowcarTV10 ай бұрын

  • very very nice... Thank you

    @akshayshelkeengg@akshayshelkeengg Жыл бұрын

  • 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.

    @atlanical@atlanical7 ай бұрын

  • 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

    @gianniskourtessis5483@gianniskourtessis5483 Жыл бұрын

  • 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

    @thinkcorrectly@thinkcorrectly Жыл бұрын

  • Very nice tutorial !! Thank you very much. How to make entire "Project" clickable instead of just arrow icon ? Please help

    @VAcharya@VAcharya Жыл бұрын

  • Great video as always, how about the mobile view of this sidebar?

    @julietkelechi7785@julietkelechi7785 Жыл бұрын

  • Helpful Thankyou

    @abhinandvp5289@abhinandvp5289 Жыл бұрын

  • 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

    @johnsherry5319@johnsherry5319 Жыл бұрын

  • 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

    @thisissharief7651@thisissharief7651 Жыл бұрын

  • Awesome Video ++++++++++++++++++++++++ 😃

    @mohamedyoussef8835@mohamedyoussef8835 Жыл бұрын

  • simpl clear and super super

    @pasindusandaruwanweerasing5747@pasindusandaruwanweerasing574710 ай бұрын

  • merci beaucoup a toi :))

    @komapas_pku215@komapas_pku215 Жыл бұрын

  • 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

    @oradatech4170@oradatech4170 Жыл бұрын

  • Would be awesome if you could provide the code. It would be much easier to test it out.

    @Aff3mitWaff3Lp@Aff3mitWaff3Lp Жыл бұрын

  • very nice

    @julfikerislam2402@julfikerislam2402 Жыл бұрын

  • Awesome

    @CodeSnipet@CodeSnipet2 ай бұрын

  • Thx you very muchhhhhhhh

    @kittisakphatchaiphongsa3177@kittisakphatchaiphongsa3177 Жыл бұрын

  • Hi - do you have the source code from this video somewhere? I could not find it in your github repos. Thanks!

    @costabasil@costabasil Жыл бұрын

  • Good video , similar to me but I am using React js and tailwind css

    @CodeAProgram@CodeAProgram2 жыл бұрын

    • Keep it up

      @itzpradip@itzpradip2 жыл бұрын

    • Thanks to Code A Program for sharing the repo!!!

      @b1chler@b1chler Жыл бұрын

  • 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

    @rufialiyev6301@rufialiyev63014 ай бұрын

  • all workеd

    @franklatorre8572@franklatorre8572 Жыл бұрын

  • its very simple and usefull

    @kishankumar-ze5pf@kishankumar-ze5pf4 ай бұрын

    • Thanks for liking

      @itzpradip@itzpradip4 ай бұрын

  • 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

    @pettert6073@pettert6073 Жыл бұрын

  • 20:09 where did you declare the element menu and index??

    @afthaabb@afthaabb2 ай бұрын

  • 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!

    @immikegt@immikegt Жыл бұрын

  • please did more videos like this

    @lecongduong6056@lecongduong60562 жыл бұрын

    • Sure. Thanks for your comment & support.

      @itzpradip@itzpradip2 жыл бұрын

  • BEEST!!!

    @mubareks7515@mubareks7515 Жыл бұрын

  • thank you bro

    @andybeauregardadams9200@andybeauregardadams9200 Жыл бұрын

  • ❤

    @a.j.l.____8165@a.j.l.____81655 ай бұрын

  • Hiii bro in this video please add routing whis is must important for us as soon as possible

    @nitinameta1133@nitinameta1133Ай бұрын

  • 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

    @waelm.elsaid295@waelm.elsaid295 Жыл бұрын

    • 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

      @eczeeofficial@eczeeofficial Жыл бұрын

  • 16:22 bookmark

    @arpitkhanulia7@arpitkhanulia7 Жыл бұрын

  • How about if we have 2 or much submenus? there's open all when I click one

    @bagussonarangga7283@bagussonarangga7283 Жыл бұрын

    • I too bumped into this issue... found a solution? Please share...

      @vasudevg1165@vasudevg116510 ай бұрын

  • 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 .

    @souben2147@souben21475 ай бұрын

  • from where can I get its code?

    @priyachaurasiya6520@priyachaurasiya65206 ай бұрын

  • How to add routing in this menus

    @nitinameta1133@nitinameta1133Ай бұрын

  • is there any repo bro?

    @RakeshKumar-ef1lz@RakeshKumar-ef1lz Жыл бұрын

  • Is this device responsive

    @techyvivekraj@techyvivekraj2 жыл бұрын

  • How to place navigation links?

    @alexsantos8410@alexsantos84102 ай бұрын

  • my problem is when menus have multiple dropdown and then all submenu is open

    @kukuh1824@kukuh1824Ай бұрын

  • Superb! It is interesting why when you choose w-18 instead of w-20 duration-300 not works. Thank you

    @NormandoHall@NormandoHall2 жыл бұрын

    • Well... I found the issue. w-18 no exists in tailwind.

      @NormandoHall@NormandoHall2 жыл бұрын

  • where can i get the code of this...pls anyone can share it.

    @rickyrauniyar7104@rickyrauniyar71043 ай бұрын

    • Iam asking same

      @harrishpaul7374@harrishpaul73743 ай бұрын

  • Where is code please send me

    @harrishpaul7374@harrishpaul73743 ай бұрын

  • What if there are multiple submenus, when sunmenuOpen = true all submenus are opened

    @mohammedbouazza6257@mohammedbouazza6257 Жыл бұрын

    • Have you been able to fix this issue? If not i can show you my work around

      @Jazz__Dev@Jazz__Dev Жыл бұрын

    • @@Jazz__Dev Hi... Please share the workaround... many ppl are facing this issue...🙏

      @vasudevg1165@vasudevg116510 ай бұрын

    • @@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@Jazz__Dev10 ай бұрын

    • @@Jazz__Dev the issue of all submenus expanding when any top-level item is clicked

      @vasudevg1165@vasudevg116510 ай бұрын

  • code please

    @asmafurqan8535@asmafurqan8535 Жыл бұрын

  • source code ?

    @imtiazhussain35@imtiazhussain35 Жыл бұрын

  • how to make it scrollable on the menu?

    @iamddoz2197@iamddoz219711 ай бұрын

    • I made h-fit instead of h-screen and the size of the sidebar became dynamic

      @vasudevg1165@vasudevg116510 ай бұрын

    • @@vasudevg1165 thank you

      @iamddoz2197@iamddoz21979 ай бұрын

  • Source code

    @user-it6uq4eo8e@user-it6uq4eo8e5 ай бұрын

  • Post source code bro

    @tremolony4924@tremolony4924 Жыл бұрын

  • need code

    @HeRaKhan@HeRaKhan10 ай бұрын

  • eror in console

    @nestorabello7096@nestorabello7096 Жыл бұрын

  • 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

    @selindemircioglu3502@selindemircioglu3502 Жыл бұрын

    • Same problem

      @youcantimagine979@youcantimagine979 Жыл бұрын

    • Me, too... did anyone find a way around the issue?

      @vasudevg1165@vasudevg116510 ай бұрын

    • got the same problem

      @thomasapfelbacher9308@thomasapfelbacher93086 ай бұрын
KZhead