What are the different Navbar Components in Bootstrap?
Last Updated :
16 Feb, 2024
Bootstrap provides a variety of components that can be used to enhance and customize navigation bars. Here are some of the commonly used navbar components.
Syntax
// Navbar Container: The main container for the navbar.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
// Navbar Brand: Area typically displaying the website's logo or name.
<a class="navbar-brand" href="#">Your Brand</a>
// Navbar Toggler: Button for toggling the collapsed menu on smaller screens.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
The table below illustrates the Navbar Components alongside their description.
Component |
Description |
Navbar Brand |
The area for the website’s logo or name is typically located on the left side of the navbar. Created using the .navbar-brand class. |
Navbar Links |
Navigation links direct users to different sections or pages of the website. Positioned to the right of the navbar brand. Created using anchor (<a>) elements with the .nav-link class. |
Dropdowns |
Organized grouping of navigation items under a parent link. Created using the .dropdown class for the parent and .dropdown-menu class for the dropdown container. |
Navbar Toggler |
Icon, usually represented by a hamburger, is used to toggle the visibility of the collapsed menu on smaller screens. Created with the .navbar-toggler class. |
Collapse Content |
Content that collapses and expands when the navbar toggler is clicked on smaller screens. Wrapped inside a <div> element with the .collapse class. |
Forms |
Embedded forms within the navbar for tasks like search or user authentication. Created using <form> elements with appropriate Bootstrap classes. |
Navbar Text |
Additional text or content is added to the navbar using the .navbar-text class. |
Ref: https://www.geeksforgeeks.org/bootstrap-4-navigation-bar/
Share your thoughts in the comments
Please Login to comment...