Bootstrap 5 Navs

The base ".nav" class shares the overall markup and styles of the Bootstrap navigation with a link. It navigates all important and required pages in the bar's small size. We get the overall structure of the web application and its pages.

Bootstrap 5 nav function is used to design the navigation component, which is a solid basis for creating various navigation component kinds. It adds style overrides, basic disabled styling, and link padding for wider hit areas.

There is no ".active" state in the base ".nav" function component. We can use the "disabled" function to inactive or disable lint content by default.

Basic Navs

The default setting for a web page's basic navigation function is horizontal alignment. The ".nav" class is inserted into the "ul" element, and then each "li" element's ".nav-item" and ".nav-link" classes are added.

Syntax

The following syntax shows basic nav function.

Example

The following example shows basic navs using bootstrap 5 classes.

Output

The basic navs shows in below image.

Bootstrap 5 Nav alignments

The nav function is a basic navigation feature web page. We can align the nav function at the pages' start, center, and end as per requirement. The nav function uses the "justify-content-center" and "justify-content-end" classes for the center and end position, respectively.

Syntax

The following syntax shows basic nav function for center alignment.

Example

The following image shows start, middle and end alignment of the nav function.

Output

The alignment of the nav shows in below image.

Vertical Navs

The "flext-column" class works for the vertical alignment of the nav function on the html element like <div> tag.

Syntax

The following syntax shows basic nav function for vertical alignment.

Example

The following example shows vertical navs using bootstrap 5 classes.

Output

The vertical nav function shows in below image.

Bootstrap 5 Nav tabs

The "flext-tab" class works for the tabular format of the nav function on the html element like <div> tag.

Syntax

The following syntax shows basic nav function with tabs.

Example

The following example shows vertical navs using bootstrap 5 classes.

Output

The nav tab function shows in below image.

Bootstrap 5 Nav pills

The "flext-pills" class works for the pills format of the nav function on the html element like <div> tag.

Syntax

The following syntax shows basic nav function with pills.

Example

The following example shows navs function with pills using bootstrap 5 classes.

Output

The nav pill function shows in below image.

Navs function with fills Tabs/pills

The " nav-fills " class works to acquire appropriate space for the horizontal nav items. This class works on the "tab" and "pills" of the nav link function. The nav function shows the link content with the appropriate width per the web page.

Syntax

The following syntax shows justify nav function with pills.

The following syntax shows justify nav function with tab.

Example

The following example shows navs function with fills using bootstrap 5 classes.

Output

The nav function with fills class shows the below image.

Navs function with justifying Tabs/pills

The " nav-justified" class works to acquire space for the horizontal nav function. This class works on the "tab" and "pills" of the nav function. The justified nav function shows the link content with equal width.

Syntax

The following syntax shows justify nav function with pills.

The following syntax shows justify nav function with tab.

Example

The following example shows navs function with justified width using bootstrap 5 classes.

Output

The justified nav function shows in below image.

Navs function with dropdown

The dropdown function uses inside of the bootstrap 5 nav function. We can click on the required link to show dropdown functions. The "dropdown" class uses in the <li> tag with the "nav-item" class. The dropdown toggle uses with the "nav-link" class inside of the <a> tag. we can place the dropdown inside of the nav tag.

Example

The following example shows basic navs with dropdown using bootstrap 5 classes.

Output

The nav tab function with dropdown shows the below image.

Navs function with Toggleable

The toggleable function uses to display a particular tab of the pages after clicking on the nav link. The data-bs-toggle = "tab" function requires inside of the <a> tag with the ".nav-link" class. The " tab-content" class shows which data shows for nav function links. The id and href are required for the respective div container and nav item.

syntax

The following example shows navs with toggleable function using bootstrap 5 classes.

Example

The following example shows navs with toggleable function using bootstrap 5 classes.

Output

The nav tab function with the toggleable function shows the below image.

Conclusion

The bootstrap 5 nav function is a basic navigation function for a web application. It helps to find required and essential links immediately. This function is user-friendly, simple, and space-saving for large-size applications.