Navbar In Bootstrap 5
In this tutorial, we are going to see how to integrate navbar in bootstrap 5. Navbar is fully responsive. Navbar auto extend or collapse as per screen size.
Navbar in boostrap 5 is created by using .navbar class.
- What is Navbar
- Advantage of Bootstrap 5 Navbar
- How to Add Bootstrap 5 Navbar In Web Page
- Live Demo's Of Bootstrap 5 Navbar
- Demo 1 - Simple Navbar
- Demo 2 - Navbar with Logo
- Demo 3 - Navbar With Logo And Drop Down Menu.
- Demo 4 :- Navbar With Fixed Header On Top
- Demo 5 :- Navbar With Fixed Header On Top And Dynamic Class in Header
- Demo 6 :- Navbar Open With Left Side Bar
- Demo 7 :- Ecommerce Navbar Open With Search And Cart Button
What is Navbar
A navigation bar is also called a Navbar that contains links of the other pages it is an essential part of the page it comes under header section.
Advantage of Bootstrap 5 Navbar
Bootstrap 5 gives us navbar without doing any manual coding. It is fully responsive and can also be fixed.
How to Add Bootstrap 5 Navbar In Web Page
Firstly, we have to add, Bootstrap 5 js and CSS CDN link in head section of web page. You can copy the below code for direct CDN link of js and CSS.
Link For Navbar
Paste in head section.
<!---------- Paste This in head section -------->
<>
<><>
<!---------- Paste This in head section -------->
Demo's of Navbar Bootstrap 5
Here in this tutorial we are creating examples of responsive navbar which is helpful to create a main menu section in a website.
Demo 1 :- Simple Navbar
Here we creating a simple navbar through bootstrap 5.
Simple navbar throught bootstrap 5
index.html
<>
<>
<>
<>Bootstrap 5 Navbar Example - Demo 1<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>Link 1<>
<>
<>
<>Link 2<>
<>
<>
<>Link 3<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Demo 1 - Simple Navbar<>
<>This is my first simple navbar<>
<>
<>
<>
<>
<>
<>
Demo 2 :- Navbar with Logo
Here we creating navbar with logo through bootstrap 5.
Navbar with Logo throught bootstrap 5
index.html
<>
<>
<>
<>Bootstrap 5 Navbar Example - Demo 2<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>Logo<>
<>
<><>
<>
<>
<>
<>
<>Link 1<>
<>
<>
<>Link 2<>
<>
<>
<>Link 3<>
<>
<>
<>Link 4<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Demo 2 - Navbar With Logo And Menu<>
<>This is Navbar With Logo And Menu<>
<>
<>
<>
<>
<>
<>
Demo 3 :- Navbar With Logo And Drop Down Menu.
Here we creating Navbar With Logo And Drop Down Menu through bootstrap 5.
Navbar With Logo And Drop Down Menu throught bootstrap 5
index.html
<>
<>
<>
<>Bootstrap 5 Navbar Example - Demo 3<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>Home<>
<>
<>
<>Link 1<>
<>
<>
<>Link 2<>
<>
<>
<> Dropdown <>
<>
<>
<>Action<>
<>
<>
<>Another action<>
<>
<>
<>
<>
<>
<>Something else here<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Demo 3 - Navbar With Logo And Drop Down Menu<>
<>This is Navbar With Logo And Drop Down Menu<>
<>
<>
<>
<>
<>
<>
Demo 4 :- Navbar With Fixed Header On Top
Here we creating navbar fixed on top through bootstrap 5.
Navbar With Fixed Header On Top throught bootstrap 5
index.html
<>
<>
<>
<>Bootstrap 5 Navbar Example - Demo 4<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>LOGO <><>
<>
<>
<><>
<>
<>
<>
<>
<>
<>Home<>
<>
<>
<>
<>
<>About Us<>
<>
<>
<>
<>
<>Services<>
<>
<>
<>
<>
<>Blog<>
<>
<>
<>
<>
<>Contact Us<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Demo 4 - Navbar With Fixed Header On Top<>
<>This is Navbar With Fixed Header On Top. To test this please scroll down.<>
<>
<>
<>
<>
<>
<>
Demo 5 :- Navbar With Fixed Header On Top And Dynamic Class in Header
Here we creating navbar fixed on top and class are dynamic through bootstrap 5.
Navbar With Fixed Header On Top And Dynamic Class in Header throught bootstrap 5
index.html
<>
<>
<>
<>Bootstrap 5 Navbar Example - Demo 6<>
<>
<>
<>
<><>
<>
<>
<!---------------Nav Bar Start -------------------->
<>
<> <>LOGO<><><>
<> <><> <>
<>
<>
<> <><>Home<><><>
<> <><>About Us<><><>
<> <><>Services<><><>
<> <><>Blog<><><>
<> <><>Contact Us<><><>
<>
<>
<>
<>
<!--------------- Nav Bar End-------------------->
<>
<>
<>
<>
<>Demo 6 - Navbar With Fixed Header On Top And Dynamic Class in Header<>
<>This is Navbar With Fixed Header On Top And Dynamic Class in Header. To test this please scroll down.<>
<>
<>
<>
<>
<>
/* To Add Class On Scroll */
window.onscroll = function() {
if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
document.getElementById("navbar_top").classList.add('header-fixed');
} else {
document.getElementById("navbar_top").classList.remove('header-fixed')
}
};
<>
<>
<>
Demo 6 :- Navbar Open With Left Side Bar
Here we creating navbar open from left side through bootstrap 5.
Navbar Open With Left Side Bar throught bootstrap 5
index
<>
<>
<>
<>Bootstrap 5 Navbar Example - Demo 7<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>Offcanvas dark navbar<>
<>
<><>
<>
<>
<>
<>Dark offcanvas<>
<><>
<>
<>
<>
<>
<>Home<>
<>
<>
<>Link<>
<>
<>
<> Dropdown <>
<>
<>
<>Action<>
<>
<>
<>Another action<>
<>
<>
<>
<>
<>
<>Something else here<>
<>
<>
<>
<>
<>
<>
<>Search<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>Demo 7 - Navbar Open With Left Side Bar<>
<>This is Navbar Open With Left Side Bar. To test this please click on nav bar.<>
<>
<>
<>
<>
<>
<>
Demo 1 :- Ecommerce Navbar Open With Search And Cart Button
Here we going to create Ecommerce Navbar Open With Search And Cart Button through bootstrap 5.
Ecommerce Navbar Open With Search And Cart Button
index.html
<>
<>
<>Bootstrap 5 Navbar Example - Demo 8<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>
<>
<>
<>LOGO<>
<>
<>
<>
<>
<> <>Home<> <>
<> <>Category<> <>
<> <>Menu List<> <>
<> <>Our Services<> <>
<> <>Testimonial<> <>
<> <>Contact Us<> <>
<>
<>
<>
<>
<> <><> <>
<><><><>
<><><><>
<>
<>
<>
<>
<>
<>
<>