Javatpoint Logo
Javatpoint Logo

Bootstrap 5 navbar

The Nav Bar in bootstrap 5 connects and links all of a website's relevant web pages, making it simple for users to navigate between them. A website's navigation bar, which includes the page names and links to them and a search box tailored to user needs, is a crucial element.
For responsive collapsing and color scheme classes, navbars need to wrap the ".navbar" with the ".navbar-expand-sm|-md|-lg|-xl|-xxl." By default, navbars and their contents are fluid.

Basic navbar function

The container can be modified to limit its horizontal width in many ways. Use our utility classes for flex and spacing to adjust the spacing and alignment within navbars.

By default, navbars are responsive, but you can simply change that with the bootstrap 5 class. The responsive navigation bar function depends on our Collapse JavaScript plugin.

Use a "nav" element to ensure accessibility, or, if using a more general element like a "div," add the attribute role = "navigation". This role uses each navbar to make it clear to users of assistive technologies, such as a landmark area.

Use aria-current = "page" to indicate the current page or aria-current="true" to indicate the current item in a set.

Syntax

The following syntax shows navbar function using bootstrap 5 classes.

Example

Output

The basic navbar function shows in below image.

Bootstrap 5 navbar

Vertical navbar

The ".navbar-expand-sm|-md|-lg|-xl|-xxl" class uses the responsive horizontal navbar. If we do not use the navbar expand class, the navbar function automatically displays in vertical format. The <nav> tag uses the navbar class with the required background class to show the vertical navbar.

Syntax

The following syntax shows vertical navbar function using bootstrap 5 classes.

Example

The following example shows vertical navbar using bootstrap 5 classes.

Output

The vertical navbar function shows below image.

Bootstrap 5 navbar2

Centered navbar

The "justify-content-center" class places navbar items in the center position. If we want to place items in the end position, use the "justify-content-end" class. This class is placed inside of the <nav> tag with the "navbar" class.

Syntax

The following syntax shows vertical navbar function using bootstrap 5 classes.

Example

The following example shows vertical navbar using bootstrap 5 classes.

Output

The centered navbar function shows below image.

Bootstrap 5 navbar

Colored navbar function

The "contextual" classes are placed in the <nav> tag with the navbar class to display the colored navbar. The navbar changes the background color per the required bg-* class. The colored navbar either gives the meaning of the navigational function or shows the navbar as per the application's theme. We can modify with CSS style and bootstrap 5 classes.

Syntax

The following syntax shows navbar function using bootstrap 5 classes.

Example

The following example shows colored navbar using bootstrap 5 classes. we can see different background colors navbar.

Output

The colored navbar function shows in below image.

Bootstrap 5 navbar

Navbar function with Logo

The "navbar-brand" shows the navigation bar's logo, images, and animated function. This function helps to represent the company's slogan or logo. This class is placed in the <a> tag to modify the nav item with the required logo.

Syntax

The following syntax shows navbar function using bootstrap 5 classes.

Example

The following example shows navbar with logo using bootstrap 5 classes.

Output

The navbar with the logo function shows the below image.

Bootstrap 5 navbar

Navbar function with Form

The navbar function uses a form for immediate user interaction. The navbar uses a form to submit users' data, like an email address or contact number. If we want to search for anything from a web page, the navigation bar uses a search function with the submit button.

Example

The following example shows navbar with form using bootstrap 5 classes.

Output

The navbar with the form function shows the below image.

Bootstrap 5 navbar

Toggle Navbar function

The toggle navbar helps to create a responsive function for all sizes of devices. The navbar shows on large-size devices with default size. If the device's screen is xl or sm size, then the toggle button shows on the screen. This button works as a dropdown with a nav link.

Syntax

The following syntax shows toggle navbar using bootstrap 5 classes.

Example

The following example shows navbar with Toggleable function using bootstrap 5 classes.

Output

The navbar with the toggle function shows the below image.

Bootstrap 5 navbar

Sticky Navbar function

The navbar function places somewhere on the web pages. The web page scrolls up with information, and then the navbar function sticks to the top of the page and scrolls only to the body content. We can create a nav bar with a sticky top or bottom position using the "sticky-top" or the "sticky-bottom" position.

Syntax

The following syntax shows navbar with sticky top position.

The following syntax shows navbar with sticky bottom position.

Example

The following example shows navbar with sticky top position using bootstrap 5 classes.

Output

The navbar function with a sticky top position shows the below image.

Bootstrap 5 navbar

Navbar function with Fixed Position

The "fixed-top" or the "fixed-bottom" class places the navbar function on the top or bottom by default. The navbar function displays a fixed position on the web page.

Syntax

The following syntax shows navbar with fixed top position.

The following syntax shows navbar with fixed bottom position.

Example

The following example shows navbar with fixed position using bootstrap 5 classes. the first navbar shows on top side of the application and second navbar shows on bottom side of the application. We can see the other container data with navigation bar function.

Output

The navbar function with a fixed position shows the below image.

Bootstrap 5 navbar

Conclusion

The navbar function shows the navigation link of the web application. It is an attractive, user-interactive, and simple function on a web-based application.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA