What are the different Navbar Components in Bootstrap?
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. |
Contact Us