Тёмный

React Sidebar with Dropdown Menu Tutorial - Create Sub Navigation 

Brian Design
Подписаться 115 тыс.
Просмотров 198 тыс.
50% 1

Опубликовано:

 

28 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 183   
@viewtifulviewer7282
@viewtifulviewer7282 3 года назад
Managed to get this working using only two components and recursion! Thank you so much for this! Amazing!
@RizaGunturPrakoso
@RizaGunturPrakoso 2 года назад
Please share through videos, I'm really struggling here understanding React and the whole web syntax coming from a backend Java developer
@robertrodrigues822
@robertrodrigues822 3 года назад
Toop!! Muito obrigado pelos conhecimentos, confesso que pensei que fosse muito difícil e que não iria conseguir compreender e entender e também aprender, mas agora que conseguir finalizar, percebo que foi simples é muito fácil de entender, por mas que precisei traduzir a vídeo aula rsrs. Desejo todo sucesso e continue trazendo mais conteúdos bons, breve breve vai ser eu montando um canal também.
@ronsivan93
@ronsivan93 3 года назад
I would love to do a code along with a full React+SCSS web app tutorial A tutorial about Authorization with Json Web Tokens (JWT) and Refresh tokens would be neat as well :)
@jgvlc
@jgvlc 3 года назад
Your tutorials are really amazing, they add a lot of value, you deserve many more subscribers!
@TheDonMan97
@TheDonMan97 2 года назад
Love you dudeeee! Omg im just starting to create this app for my company and I had no idea to do the drop box and dude! THANK YOU! After days, I finally figured out
@TheCodingOdyssey
@TheCodingOdyssey 3 года назад
I love using styled-components as well..they make working with css so easy and dynamic
@briandesign
@briandesign 3 года назад
Yeah styled components are awesome
@makopafruit
@makopafruit 3 года назад
I'm using your sidenav on my project. Thanks mate! what a great Guru
@maeeshameem1578
@maeeshameem1578 3 года назад
You are really great! I am doing my react project with the help of your tutorials. Thanks a lot lot. Please continue uploading amazing videos!
@briandesign
@briandesign 3 года назад
Thanks, will do!
@yusufnusrat
@yusufnusrat 2 года назад
@@briandesign hello one question, can you change the background of the button or just style the button when its opened, and when closed it returns back to what it is?
@vasudevg1165
@vasudevg1165 Год назад
Thanks for the great video! I did this just today - happened to auto'ly import the latest version of react-router-dom. The Switch made me run around for a while as I wasn't expecting something as key as that might get moved-out/deprecated. Anyone who may face this issue, please use Routes instead of Switch.
@olgam4605
@olgam4605 3 года назад
This tutorial saved me !!!! Thank you so much ! I just subscribed
@thelaststanding97
@thelaststanding97 3 года назад
me too hehe :D
@KorhalKk
@KorhalKk Год назад
I'd create an "active" and "inactive" style and just change with a template string and short circuiting. So whenever you click the button it changes the style, without referring directly to 0% or 100%. It gives more control when you're trying to style it on a CSS. But thats just me, I've learned your way and its nice although I feel like I can get lost on my own code. Maybe its my coding ocd.
@thelaststanding97
@thelaststanding97 3 года назад
That's exactly what i need right now! Thanks u so much! Keep it uppppp
@manmountain462
@manmountain462 2 года назад
My fav react tutor! ⭐
@mathanjeya8213
@mathanjeya8213 3 года назад
Great Man ! Please Do a carousel (auto) with styled components !
@yoursnagaraju
@yoursnagaraju 3 года назад
Thank you... i recently started learning react!! it has given big boost to my learning :) :)
@briandesign
@briandesign 3 года назад
Keep it up!
@michaelsylva1686
@michaelsylva1686 3 года назад
i seem to have a bug mapping the subNav, u did make use of a "?" before the map function but now all subnavs become active when one is clicked
@patrickkaipainen3301
@patrickkaipainen3301 3 года назад
Really nice! I love that you can easily add menu items by changing the data file.
@Mr_Brian
@Mr_Brian 3 года назад
Good job Brian. I love your content. Keep going bro.
@briandesign
@briandesign 3 года назад
Thanks Brian!
@abrahamolatubosun4289
@abrahamolatubosun4289 2 года назад
Great video Brian, it will be nice if after selecting a child component (Link) the sidebar should disapare to the left, it will make the navigation better. Thanks anyway.
@oluwasegunhaziz
@oluwasegunhaziz 3 года назад
Well done. can you create a React Dashboard Tutorial using Reactstrap
@briandesign
@briandesign 3 года назад
I can add it to my video list
@mito2377
@mito2377 3 года назад
Definately something I'd like to see!
@yeborfight3603
@yeborfight3603 3 года назад
@@briandesign that'll be great, waiting for that
@chris3079
@chris3079 3 года назад
Great tutorial, only suggestion i would like to make: duplicate the hover border-left in the non hover state, with same background color as your background, so u don't get that jittery text on hover, plus i like to add "use-select: none", so you never get that ugly text highlight.
@viewtifulviewer7282
@viewtifulviewer7282 3 года назад
Very Good, this made a lot of sense
@lirimm5562
@lirimm5562 3 года назад
I learned alot from you. Thank you very much ❤️
@rachaelklein694
@rachaelklein694 3 года назад
How would you go about adding one more nesting item, into an existing nested item.
@francofrigerio2666
@francofrigerio2666 3 года назад
Fue de mucha ayuda. Saludos desde Argentina !
@milanpandey7398
@milanpandey7398 3 года назад
How would you close one dropdown when the other is open?
@vince8093
@vince8093 3 года назад
who disliked this video bruh dude like this guy is awsome awsome awsome quality showes.
@briandesign
@briandesign 3 года назад
they must have been watching this upside down and thought it was the thumbs up button
@timothyvandeweerd946
@timothyvandeweerd946 2 года назад
Thank you sir, it was just what I was looking for. This was an excellent tutorial and is much appreciated. Can I ask how you would have all of the items that have sub items expand initially?
@duncankioi9437
@duncankioi9437 Месяц назад
Hello, I need your help. I have a dropdown inside a dropdrown but Im having a challenge when I click one link of the second dropdown all the links of the second dropdown display there content instead of only one. And also when I try to display the items in flex they just display in a straight line.
@jv18creator
@jv18creator 3 года назад
35:47 what's key for?
@YousufJusani
@YousufJusani 3 года назад
Great Job Sir, literally best content 🙌🏼 Create my first web look by watching your video. 😋 Needed this type of tutorial for my Admin dashboard, can you make video on that too? dashboard functionalities with react (e.g. sidebar, topbar, login navbar topbar change with name , logout)
@marthaizquierdo3175
@marthaizquierdo3175 2 года назад
thanks so much for this vid! it helped a ton!! i was wondering though, how can we get a submenus submenu to display? I noticed some other comments were asking a similar question but I didnt see a response.
@rajan_mishra
@rajan_mishra 2 года назад
Thanks Brian for this awesome video. Any tricks if I want to keep the sidebar always Open and Show the content in the Right pane. What changes it would need in that case? Really appreciate your help.
@LInfotechSolutions
@LInfotechSolutions Год назад
Nice tutorial. Really helped me a lot. Thanks. Is there a way to display sub-menus in deeper levels, I mean, an item having sub-menu which itself is a sub-menu. This can go to may be 3-4 levels. You are showing only two levels - main menu and sub-menu. Appreciate your quick reply. Benny
@froyorex4856
@froyorex4856 3 года назад
Goood video dude.....but normalize stating the dependencies required so we wouldn't have to go back and forth stopping and restarting the server.
@Shakhzod_Yuldoshov
@Shakhzod_Yuldoshov 3 года назад
can you upload some videos about, how to create websites using react + redux, please. You explain perfectly. Your videos are great. I love your Videos. All of them are very useful, thank you for all of them. But I have an Idea. if you launch the React course all of your subscribers will be so happy. Course content: 1. JSX - (HTML + jS) 2. Redux; Flux 3. State; Props 4. Hooks 5. The component LifeCycleC (Mounting; Updating; unMounting); 6. ComponentDidMpunt 7. React-Router 8. Link 9. Route -> URL 10. brouserRouter 11. Switch
@briandesign
@briandesign 3 года назад
check out my react website videos, I cover a lot of the things you mentioned
@arthur84350
@arthur84350 Год назад
how do i change the position of the icon. the icons are above the label
@sk8erboi84
@sk8erboi84 2 года назад
Thank you for that great video but I would like to have a collapsable dropdown. Would you mind showing me how to do it please
@tanishsharma5440
@tanishsharma5440 Год назад
At 36:00, when I created all the sidebarData, sideMenu and all, and refresh the page, My data of sidebarData like Overview, reports and etc doesn't show up. Please help me and tell me where I could be wrong
@algunoacepta
@algunoacepta 3 года назад
Amazing video. Quick question, I wanna put some text on the top bar, where should I do it?
@ryansharpe903
@ryansharpe903 3 года назад
Awesome work and really easy to follow along with and learn! I'm wondering if you can make the components behind the Sidebar to be able to shrink and grow in width to avoid content being lost behind when opened?
@humbertojunior2592
@humbertojunior2592 3 года назад
Mano se vc soubesse quantas pessoas vc ajuda e como seus vídeos ajudam no nosso desenvolvimento. Muito obrigado mano, vc é demais. Queria até fazer um pedido, um vídeo criando um site com Next.Js
@susanbasnet3831
@susanbasnet3831 2 года назад
hay how can we show only one dropdown menu at a time like if you have open report and now you want to open a message. you click on message and now your report will hide and only messages list will be show
@יודיתפרל
@יודיתפרל 3 года назад
thanks a lot!, it was very helpful!!, how can i do that the sidebar will not hide the content of the page when we expand the navbar? thanks
@amateurdroner4712
@amateurdroner4712 3 года назад
How can we keep submenu open when every-time we load app? Thank you so much for the tutorial.
@arthurfrabelo9922
@arthurfrabelo9922 3 года назад
Obrigado seu lindo! S2
@thedeveloper9896
@thedeveloper9896 2 года назад
how to add transition to when you click to open the dropdown? i really tried to make it smooth. also anyway to not go to the link when there is dropdown and u click the main root? cuz thats not how dropdowns work man.... there should only be link when u click the items on the dropdown or when theres no dropdown and u click the sidemenus
@1000nuha
@1000nuha 3 года назад
Thank you so much for this great tutorial it's amazing and helpful. I have question please, how can I add nasted navbar menu? I just try to add it but it gets tricky when I want to add the mapping. If you can help me with this please.
@rickkk3576
@rickkk3576 3 года назад
Thanks for the tutorial
@toeytoey7401
@toeytoey7401 3 года назад
if i want submenu in submenu how i can do that ??
@pezhmanaslani9346
@pezhmanaslani9346 2 года назад
nice job .How Can i make responsive this sidebar?
@jaweriafatima5039
@jaweriafatima5039 2 года назад
you are amazing bro
@ajaypalsidhu3029
@ajaypalsidhu3029 3 года назад
Thanks, bro!
@lauencepulido1989
@lauencepulido1989 3 года назад
Hi, How to close other open submenu when clicking to another menu. tnx
@CarlosDiaz-ed9po
@CarlosDiaz-ed9po 2 года назад
buenas como puedo hacer esa barra con next js ?
@johnspinelli9251
@johnspinelli9251 2 года назад
This was a great tutorial. Enjoyed and really easy to follow. I want the sidebar to be at the same z index as the regular page. so when expanded, it shrinks the main content instead of covering it. Any suggestions?
@chriswilliamson2851
@chriswilliamson2851 2 года назад
you would need to set the value of the of the width of the div using react so that it changes the on the fly
@gismo1337dev
@gismo1337dev 3 года назад
How to prevend the menu of closing right after click?
@vaibhavagrawal431
@vaibhavagrawal431 3 года назад
Amazing vide0 Thanks ♥
@raidenc9846
@raidenc9846 2 года назад
How can I add a sub menu in a sub-menu??
@sonam6652
@sonam6652 3 года назад
How can one highlight the selected menu item to know the current page?
@reaganaustin5968
@reaganaustin5968 3 года назад
Great tutorial! Do you know any way to make it so that when you click on the tabs to open the drop down menus it stays on the same page and opens the submenu instead of going to its own page?
@briandesign
@briandesign 3 года назад
Just remove the link from the main menu and turn it into a div
@tuufe
@tuufe 3 года назад
Very nice
@teejay1799
@teejay1799 3 года назад
Hi Brian...Great tutorial and great learning. One problem I am facing. When the number of menu items is high and doesn't fit in a page, the items don't scroll down. Am I doing something wrong or can you or anyone else help me with a solution please? Many thanks!!!
@sonynguyen4954
@sonynguyen4954 2 года назад
b.c its position is fixed. try to make it absolute or in real case the content will be longer than the navbar so I think it's not a problem I think so
@virtualalphastudios6149
@virtualalphastudios6149 Год назад
@@sonynguyen4954 Wrong, add a scrollbox in your css.
@adampippo
@adampippo 3 года назад
How to make the sidebar scrollable when you have a lot of side menus?
@AshutoshandAnurag
@AshutoshandAnurag 3 года назад
add this in css and it will work { overflow : auto; }
@basantesn1
@basantesn1 3 года назад
@@AshutoshandAnurag but how to scroll without the vertical bar appearing?
@ShahbazKhan-zl2zt
@ShahbazKhan-zl2zt 3 года назад
@@AshutoshandAnurag thank you so much you are the life saver
@asepfikri7358
@asepfikri7358 2 года назад
@@AshutoshandAnurag please let me know where should I put this overflow auto
@victornwanguma2427
@victornwanguma2427 3 года назад
Please which theme are you using, please everything in detail. Thanks in advance
@briandesign
@briandesign 3 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6etaWaiMkvM.html I made a vid here
@victornwanguma2427
@victornwanguma2427 3 года назад
Thanks
@israelsantana9794
@israelsantana9794 3 года назад
Thanks!
@briandesign
@briandesign 3 года назад
Welcome!
@MoDDingMS
@MoDDingMS 3 года назад
Could you make a portfolio website please :) btw nice video!
@briandesign
@briandesign 3 года назад
Forsure!
@vasifmammadov5236
@vasifmammadov5236 3 года назад
Class perfect, but to be honest I didn't like "styled. component" tool it is not readable and I confuse about which one is it.
@caothuan1303
@caothuan1303 Год назад
Can you guys tell me what extension be used for color of tagged literature 18:00
@briandesign
@briandesign Год назад
check my video of my vs code extensions
@caothuan1303
@caothuan1303 Год назад
@@briandesign I cant found it, code in tagged literature have green color like a string, it's hard to identify, it will be easy to have same color as CSS file. Help me
@pumagaming8765
@pumagaming8765 2 года назад
My dropdown not working
@GUDDUKUMAR-iq5fz
@GUDDUKUMAR-iq5fz 2 года назад
Hi, Can you share this Github Link
@unchart_d
@unchart_d 3 года назад
Ecommerce pls with backend if possible mate.
@aishakhan0925
@aishakhan0925 3 года назад
Very usefull
@briandesign
@briandesign 3 года назад
Thanks a lot
@pedromanuelcamargomendez6520
@pedromanuelcamargomendez6520 3 года назад
Thank good videos. Please scroll sidebar.
@CrookzArtwork
@CrookzArtwork 3 года назад
Thaks for sharing friend
@briandesign
@briandesign 3 года назад
Anytime!
@CrookzArtwork
@CrookzArtwork 3 года назад
@@briandesign love your content cuz u so damn good
@briandesign
@briandesign 3 года назад
@@CrookzArtwork thanks!
@utkarshbajpai6128
@utkarshbajpai6128 3 года назад
add a search bar if possible
@pleasedont1692
@pleasedont1692 3 года назад
When I add components in the screens it comes in front of the menu bar how can I fix it please
@briandesign
@briandesign 3 года назад
you can try adding z-index so it's always above any layers
@pleasedont1692
@pleasedont1692 3 года назад
I tried it with the previous navigation video should I add it in navbar.css?
@briandesign
@briandesign 3 года назад
I'm not sure what you're trying to do. I used styled components for this video and refactored a lot of stuff from the older one
@pleasedont1692
@pleasedont1692 3 года назад
I don't know where I should add z index that's my problem the menu bar is behind all the other screen components
@pleasedont1692
@pleasedont1692 3 года назад
Thank you for your answers
@itssjwrld
@itssjwrld 3 года назад
Nice work man really good but its not working i have just copy pasted the code but still not working
@AtifKhan-cm8qv
@AtifKhan-cm8qv 2 года назад
u should type it instead
@thomasdeepakreddy7308
@thomasdeepakreddy7308 2 года назад
Hi Brian I am currently working on web-application developing tab-section similar to web-browser tab using reactis. My requirements are-Tab-section similar to browser tab. On selecting a feature in side-navbar, a tab has to pop in the tab-section. On selecting a new feature in side-navbar, a new tab has to pop in the tab-section. Closing of tab. I have gone through react-draggable-tabs, but it does'nt have on selecting a feature a tab has to pop instead it shows entire tab. Please help me out in it.
@박민규-q1r
@박민규-q1r 3 года назад
내가 원하는게 딱 잇네 ㅠㅠㅠㅠ
@davidhahn7391
@davidhahn7391 3 года назад
awesome stuff! do you have a github?
@briandesign
@briandesign 3 года назад
yeah in bio
@NaveenPatnala
@NaveenPatnala 3 года назад
@@briandesign can you share the git hub link
@briandesign
@briandesign 3 года назад
@@NaveenPatnala in bio
@love_hunter_coc
@love_hunter_coc 3 года назад
❤️
@yannid5456
@yannid5456 Год назад
import * as , result to importing the whole package including file you will not use. This add extra not needed storage, besto import lelements used . e,g import {AIFillHome} from 'react-icon/ai'
@pumagaming8765
@pumagaming8765 2 года назад
plz help
@sadeghrafiei3233
@sadeghrafiei3233 3 года назад
Create a CV web with react.js Thank you.....
@tanishqdixit5840
@tanishqdixit5840 3 года назад
why do i not understand lmao
@thetowerfantasymusic
@thetowerfantasymusic 2 года назад
------------> How do I close one dropdown when I open another ?
@lucas-pe2290
@lucas-pe2290 2 года назад
how to do with 3 menu options, example "Reports/Reports 3/Reports3-A" HELPPPP
@atnguyenucchi9776
@atnguyenucchi9776 2 года назад
i have problem when i open sidebar the page will be hide , what can i do to fix problem?
@eddypenaranda8787
@eddypenaranda8787 2 года назад
Thanks for the video, only one thing, the sidebar is not responsive right?
@DeepakSharma-vl5xr
@DeepakSharma-vl5xr 3 года назад
Great video! Btw I tried this and added more elements to it(more than what can be displayed on screen at a time) but now I want a scroll functionality for this sidebar only, how I can do that?
@AshutoshandAnurag
@AshutoshandAnurag 3 года назад
add this in css and it will work { overflow : auto; }
@mohamedyoussef8835
@mohamedyoussef8835 Год назад
Awesome video +++++++++++++++++ 🙂
@cristhianjhlcom
@cristhianjhlcom 3 года назад
Hello nice tutorial! keep it up 😎 i think i have a bug im trying to open the dropdown from Reports menu when im in another url (example, the Team's url that not have dropdown) but this make a redirect to Reports url and doesnt open the dropdown, i have to been in this reports url if i want to open the dropdown, any suggestion? thanks
@sandeepmaurya1694
@sandeepmaurya1694 2 года назад
16:46
@galaxy1066
@galaxy1066 2 года назад
what is name of his theme ?
@reaganaustin5968
@reaganaustin5968 3 года назад
Hey is there a way to make it so that the navbar at the top is fixed to the top of the screen so you can't scroll down and it disappear?
@reaganaustin5968
@reaganaustin5968 3 года назад
nvm got it I hate css
@jeyanthan360
@jeyanthan360 Год назад
Thank You So much
@nandopookey9195
@nandopookey9195 Год назад
Thank you
@nachoacaso5673
@nachoacaso5673 2 года назад
Traducir por voz 128 / 5000 Resultados de traducción To start I love your videos, I would like if you can make one with React Sidebar Navbar Footer and of course responsive. 🙏
@kevinherrera8231
@kevinherrera8231 2 года назад
Greetings, thank you very much for the content. A question: I have a top navigation bar and this side navigation bar overlaps, how can I make the side one start just below the top one?
Далее
Самая сложная маска…
00:32
Просмотров 1,2 млн
Офицер, я всё объясню
01:00
Просмотров 3,3 млн
С какого года вы со мной?
00:13
Просмотров 186 тыс.
Create a sidebar with submenu using React.JS
28:05
Просмотров 68 тыс.
Coding Was HARD Until I Learned These 5 Things...
8:34
React Modal Tutorial Using Hooks and Styled Components
25:14
Why Signals Are Better Than React Hooks
16:30
Просмотров 478 тыс.
Самая сложная маска…
00:32
Просмотров 1,2 млн