React Sidebar with Dropdown Menu Tutorial - Create Sub Navigation

Thank You So much

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.

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.

Awesome video +++++++++++++++++ 🙂

how do i change the position of the icon. the icons are above the label

Thank you

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

import './App.css';
import Sidebar from './components/Sidebar';
import { BrowserRouter as Router, Routes , Route} from 'react-router-dom'
import Overview from './pages/Overview';
import { Reports, ReportsOne, ReportsTwo, ReportsThree } from './pages/Reports';
import Team from './pages/Team';


function App() {
return (
<Router>
<Sidebar />
<Routes >
<Route path='/overview' element={<Overview/>} exact/>
<Route path='/reports' element={<Reports/>} exact/>
<Route path='/reports/reports1' element={<ReportsOne/>} exact/>
<Route path='/reports/reports2' element={<ReportsTwo/>} exact/>
<Route path='/reports/reports3' element={<ReportsThree/>} exact/>
<Route path='/team' element={<Team/>} exact />
</Routes >
</Router>

);
}

export default App;

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'

Use path: '#0' for the links that you want to open the drop down and not route to any page

Hi, Can you share this Github Link

Excelent video, thank you very much!

I learned so much by watching you! Thank you very much for this. Question: What if you wanted to put an image in for an icon? Even harder question, what if you had a button with a pseudo::before and you wanted to put an icon in that?

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

hey brian thankyou for awesome video, i have question, what if we add multi level menu on sidebar? example overview -> reports -> reports a, b, c

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?

Thanks for the video, only one thing, the sidebar is not responsive right?

how to do with 3 menu options, example "Reports/Reports 3/Reports3-A" HELPPPP

buenas como puedo hacer esa barra con next js ?

plz help

My dropdown not working

what is name of his theme ?

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.

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

i have problem when i open sidebar the page will be hide , what can i do to fix problem?

Hi, can you please show an example of multilevel sidebar navigation up to 3 level in react. :)

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

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?

nice job .How Can i make responsive this sidebar?

Great tutorials, it's very useful for me

My fav react tutor! ⭐

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.

How can I add a sub menu in a sub-menu??

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?

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.

------------> How do I close one dropdown when I open another ?

hey bro, amazing tutorial, but how can I make disappear the sidebar when I click on tab of sidebar?? Thx

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.

what if function instead of path? example: logout button you put a sidebar. instead using path, function logout triggred when you push the logout button in a sidebar

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

you are amazing bro

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

Hi, How to close other open submenu when clicking to another menu. tnx

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?

How would you close one dropdown when the other is open?

That's exactly what i need right now! Thanks u so much! Keep it uppppp <3