Make your life easy with React Bootstrap Navbar!

want to create a navigation bar like this and become like this on the mobile screen size it also has a normal menu dropdown menu and fixed position menu when on scroll after this video it will become so easy to do this meet our friend navbar let's get acquainted with navbar component from reactbootstrap it takes the role of a navigation bar container all the menus logo it's all become enough for child components it has 6 important attributes that you would like to use responsibility it has expand on color team responsibility it has background and variant on positioning responsibility it has fixed and sticky you can only use one of these i personally prefer that you use fix attribute because not all the web browsers support the sticky attribute and last we have collapse on select this one is very useful on a mobile screen size i'm installing react using create react app if you don't know how to install react using create recap just see the link at the top right of this video or at the video description [Music] pause this video see that one first and if you're finished just start this again [Music] are you done let's install bootstrap and react bootstrap if you want to see how to use all basic form components for bootstrap i have a video playlist for that [Music] i will leave the link in the video description and also on the top right of this video for you guys now the react bootstrap installation is done let's clear html code inside app.js and now it's become a blank page [Music] import the essential css from bootstrap then import the component we want which is navbar now put the network component in our html code let's see the result [Music] still blank right that's because we didn't set our background [Music] let's use dark for now [Music] let's try to change it to light okay i think i prefer drop for this one as you can see the head of the nut bar is too small right and very though it's because we didn't have any elements inside it to see the real navbar let's put our logo for this purpose we'll use navbar.brand component and what is it [Music] navbar.brand is also a container but specific to logo related uses it can be a link you can just use an href property for that what about the image logo text and other things that you want to be in the brand you can just put it as a child component first one just use text logo [Music] see the text of course it is hard to see because we didn't set our theme color let's use dark theme color by using the variant attribute now we can see the logo [Music] how if we want to create our own background color we can easily set up our color and still using rock or light variant by creating a custom background class inside our css let's open our app.css and let's clear all of this we don't need this for this example i will use css class background that's my right i want my background to be red the point of this custom class is using bg desk as a prefix that way navbar can detect and use the css now apply our custom class to our navbar it's become red nice right and it's very easy to do [Music] sometimes we want an image for our logo we will use the react default logo as our image [Music] type image html code and put logo as our image source [Music] oh yeah another info about nashville background you can use any bootstrap background styling for naftware for example we have success danger and anything else you know from button or info booster styling we can use all of that let's try this out [Music] try success [Music] danger now try info [Music] okay it's proven to be a success let's move on i want to show you about fixed and sticky on network for that we need our content [Music] we will try sticky first to make it clear how it works i will add 3000 pixel height for our content see the sticky working that way how about fix let's do the fixed stop first [Music] now we can't even see the content why is that [Music] it's because the content layer is overlapped by the network component this is the default behavior of fixed attribute that's why we need to add our own margin to make this work well [Music] okay i think 60 pixel does well let's try fix bottom now that's it but if we use the bottom nav bar we don't need our margin for content let's remove it just to see it better we need to know other components to finish the software let's get to know the others what is snapbar.toggle what is it for i'm pretty sure that you have seen this burger icon in many sites right this is the navbar toggle it will show up when our screen size is more than our minimum width requirement and where to set it [Music] remember expand attribute from navbar component it is where we set the minimum width don't worry about it first the most important thing is you know these things first before you dive in okay we got a total [Music] but what is a container component that will appear when we press this toggle the name of the container component is navbar.collapse inside the network.collapse we have a menu container component with the name nav actually you can use nav directly without network collapse but if you do this you can't use the toggle because the toggle needs a collapsed component so the toggle knows which menu container that it must show or hide let's say if you don't care about the mobile user you don't even need the navbar toggle and nukbar collapse component a many container is useless if it doesn't have any menu item so what must we put as child components in the nav component [Music] first one is nav.link it's a normal menu item that can have a link second one is nav drop down it can have a sub menu inside it using left drop down dot item and if you like asparagus line you can use nav drop down dot divider okay enough talking let's dive in add our knife container first now we can create our items inside nav using nav.link [Music] create products link let's see the menu item is overlapped by the longboard i know this one it's because the image logo doesn't know its width and height let's give manual sizing for it okay it looks good now i will create other menus like about us blog contact us i'll fast forward this one because it's too straightforward [Music] done now we can try to use the drop down menu inside navbar using nav drop down let's change our products to drop down so it can have many categories inside put our item inside nav drop down using left dropdown dot item [Music] again this is just like link so i'll fast forward this one [Music] i've made tea coffee and chocolate as product categories see the result it's nice right now we will create one more category to see how the divider works [Music] create item promo which stands for promotion and then use math dropdown.divider to separate the promotion with other categories let's take a look at the result now nice i love it how about you [Music] it's done for our desktop site how about the mobile version let's resize our browser to see how it works on mobile screen size [Music] okay quite bad [Music] to make the nerf war component work responsively we can add expand and set our size threshold so the navbar knows when to change to a mobile menu type [Music] there's xl lg md sm that you already know too from normal bootstrap styling to show you how the responsive menu appears i will use lg first much more makes sense for a mobile menu right now we need to add the burger icon called knife burden toggle [Music] see you can already see the burger icon but the menu item is not inside it we need nut butter collards now as our navigation container and just put the nav components inside the navbar.collapse [Music] now it looks like a proper mobile responsive site [Music] let's ignore the error warning because it's from the react bootstrap and i'm sure they'll fix it by the way gear is not that dangerous because it's caused by deprecated code it means that they just need to change something and it will remove the error so we can relax about it i want to show you about the collapse on select attribute for this we need to change the url first so it will not refresh to another page see i can click the menu but the menu won't collapse if you want this behavior style it's okay but if you don't want it you can make it collapse using collabs and select on our network component [Music] so easy right [Music] ok we are done with the mobile responsive we can change the expand to the right value for mobile i'll use sm for this [Music] this is the normal size [Music] now i resize it to small screen size it works okay i think that's it for now i hope this is helpful please thumbs up or thumbs down this tutorial but if you don't like this tutorial please tell me why so i can become a better tutor thank you for watching see ya you

Channel: Masteryst

Views: 14,708

Rating: 4.9410319 out of 5

Keywords: react bootstrap, nav, navbar, navigation bar react bootstrap

Id: -HEjsVkfjOk

Length: 15min 57sec (957 seconds)

Published: Wed Apr 07 2021