Navs
Bootstrap’s Nav component is a powerful and versatile navigation interface tool. It’s used to create various types of navigation structures, such as tabs, pills, and responsive navigation bars. The Nav component simplifies the process of creating navigation menus, ensuring they are both functional and responsive. It can be tailored to fit a wide range of layouts and styles, from basic horizontal menus to complex tabbed interfaces with dynamic content.
Table Listing All Classes for Bootstrap Nav
Class Name | Description |
.nav | The base class for all navigation components. |
.nav-item | Used on individual navigation items within a .nav container. |
.nav-link | Applied to links within .nav-item to provide proper padding and styling. |
.nav-tabs | Gives the nav a tabbed interface appearance. |
.nav-pills | Styles the navigation items as pills. |
.flex-column | Used with .nav for vertical navigation. |
.nav-fill | Makes each nav item of equal width in its container. |
.nav-justified | Justifies nav items for full width of their parent, with each nav item’s width equal to the others. |
.dropdown-menu | Used in conjunction with .nav-item and .nav-link to create dropdowns within navigation. |
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active | Targets active or visible navigation links in a tabbed interface. |
.tab-content | Pairs with .nav-tabs to create tabbable panes of local content. |
.tab-pane | Individual content panes that pair with each tab. |
Topics with Examples and Explanations
Basic Horizontal Menu : To create a simple horizontal navigation menu.
– Start with a `<ul>` element and add the `.nav` class for basic navigation styling.
– For each item in your menu, use a `<li>` element with the class `.nav-item`.
– Inside each `<li>`, place an `<a>` tag with the class `.nav-link`. This tag will represent your navigation link.
Example:
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link 2</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled Link</a>
</li>
</ul>
Vertical Navigation Menus : Creating a navigation menu that stacks items vertically.
– Utilize a `<ul>` element with classes `.nav` and `.flex-column`.
– Add your menu items as `<li>` elements with the `.nav-item` class, similar to the horizontal menu.
– Use `<a>` tags with the `.nav-link` class for your navigation links.
Example:
<ul class=”nav flex-column”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Another Link</a>
</li>
</ul>
Tabbed Navigation Interface : Implement a navigation interface with tabbed interaction.
– Create a wrapper `<ul>` element with classes `.nav` and `.nav-tabs`.
– Inside this, add `<li>` elements with `.nav-item`. Each item represents a tab.
– Use `<a>` tags with `.nav-link` inside `.nav-item`. Assign each link an `href` attribute that points to the ID of the tab content.
Example
<ul class=”nav nav-tabs”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#home”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#profile”>Profile</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#contact”>Contact</a>
</li>
</ul>
<div id=”home”>Home content…</div>
<div id=”profile” style=”display:none”>Profile content…</div>
<div id=”contact” style=”display:none”>Contact content…</div>
(Note: The content toggling between tabs will require additional JavaScript or integration with Bootstrap’s JavaScript components.)
Navigation Pills Style : Style the navigation items as pills.
– Similar to the basic navigation menu, start with a `<ul>` element with the `.nav` class.
– Add `.nav-pills` to the `<ul>` to style the navigation items as pills.
– For each navigation item, use a `<li>` with `.nav-item` and include `<a>` with `.nav-link`.
<ul class=”nav nav-pills”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active Pill</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Pill</a>
</li>
</ul>
Equal-Width Tabs and Pills
Create a navigation bar where tabs or pills are of equal width, occupying the full width of their container:
– Begin with a `<ul>` element, adding `.nav`, `.nav-tabs` or `.nav-pills` depending on whether you want tabs or pills.
– To make each nav item of equal width, add the `.nav-fill` class to the `<ul>`.
– Continue with `<li>` elements having `.nav-item` and `<a>` elements with `.nav-link` for the navigation links.
Example:
<ul class=”nav nav-pills nav-fill”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Longer nav link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
Equal-Width Tabs and Pills
Create a navigation bar where tabs or pills are of equal width, occupying the full width of their container:
– Begin with a `<ul>` element, adding `.nav`, `.nav-tabs` or `.nav-pills` depending on whether you want tabs or pills.
– To make each nav item of equal width, add the `.nav-fill` class to the `<ul>`.
– Continue with `<li>` elements having `.nav-item` and `<a>` elements with `.nav-link` for the navigation links.
Example:
<ul class=”nav nav-pills nav-fill”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Longer nav link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
Pills Navigation with Dropdowns : Incorporate dropdown menus within pill-styled navigation.
– Construct your navigation as a list with the `.nav` and `.nav-pills` classes.
– For each dropdown, use a `<li>` element with `.nav-item` and `.dropdown`.
– Inside, include a link with `.nav-link` and `.dropdown-toggle`, adding `data-toggle=”dropdown”`.
– Follow this with a `.dropdown-menu` containing your dropdown items as `.dropdown-item`.
Example:
<ul class=”nav nav-pills”>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” data-toggle=”dropdown” href=”#” role=”button” aria-haspopup=”true” aria-expanded=”false”>Dropdown</a>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<a class=”dropdown-item” href=”#”>Something else here</a>
</div>
</li>
<!– Other pills here –>
</ul>
Tab Navigation with Dropdowns : Create tabbed navigation that includes dropdown menus.
– The approach is similar to the pills with dropdowns. Start with a `.nav` and `.nav-tabs` for the tab structure.
– Include a `.dropdown` in your `.nav-item` for the dropdown tab.
– Use `.dropdown-toggle` and `data-toggle=”dropdown”` for the dropdown trigger.
– Provide a `.dropdown-menu` with individual `.dropdown-item` links.
Example:
<ul class=”nav nav-tabs”>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” data-toggle=”dropdown” href=”#” role=”button” aria-haspopup=”true” aria-expanded=”false”>Tab Dropdown</a>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Action</a>
<!– More dropdown items –>
</div>
</li>
<!– More tabs –>
</ul>
Interactive Tabs with Dynamic Content : Create a tabbed interface where each tab displays different content dynamically:
– Build the tab navigation using `.nav` and `.nav-tabs`.
– For each tab, use `.nav-item` and `.nav-link`. Link these to content sections using `href=”#contentId”`.
– The content sections should be separate `div` elements with IDs corresponding to the `href` of the tabs.
Example:
<!– Nav tabs –>
<ul class=”nav nav-tabs” role=”tablist”>
<li class=”nav-item”>
<a class=”nav-link active” data-toggle=”tab” href=”#home”>Home</a>
</li>
<!– More tabs –>
</ul>
<!– Tab panes –>
<div class=”tab-content”>
<div class=”tab-pane fade show active” id=”home”>
<!– Content for Home tab –>
</div>
<!– More content panes –>
</div>
Dynamic Pills: Toggleable Navigation Options
Create a set of pills that can toggle between different content sections.:
– Follow the same structure as the interactive tabs, but use `.nav-pills` instead of `.nav-tabs`.
– Each `.nav-link` in the pills corresponds to a different content section, identified by matching IDs.
Example:
<!– Nav pills –>
<ul class=”nav nav-pills” role=”tablist”>
<li class=”nav-item”>
<a class=”nav-link active” data-toggle=”pill” href=”#section1″>Section 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” data-toggle=”pill” href=”#section2″>Section 2</a>
</li>
<!– More pill links –>
</ul>
<!– Pill content panes –>
<div class=”tab-content”>
<div class=”tab-pane fade show active” id=”section1″>
<!– Content for Section 1 –>
</div>
<div class=”tab-pane fade” id=”section2″>
<!– Content for Section 2 –>
</div>
<!– More content panes –>
</div>
Explanation:
– The dynamic pills behave similarly to the tabs. By clicking on a pill, the corresponding content pane is displayed.
– The `data-toggle=”pill”` attribute on each pill link is crucial for the toggling effect.
– Each content pane is wrapped in a `div` with the class `tab-pane`. The `id` of each pane matches the `href` of the corresponding pill link.
– Only one pane is visible at a time, corresponding to the active pill. The first pane is shown by default (`show active` classes).
These examples and instructions demonstrate how to use Bootstrap’s navigation classes to create various types of navigation interfaces, from basic menus to more complex, dynamic tab and pill systems. Each type of navigation serves different purposes and can be tailored to suit the specific needs of a website or application, providing an intuitive and visually appealing user experience.
Comprehensive Bootstrap Navbar with Various Features
Creating a real example that includes all the Bootstrap navigation classes in a single implementation. However, I can create a comprehensive example that incorporates several key aspects of Bootstrap’s navigation system, such as a basic nav, dropdowns, and responsive behavior.
This example will feature a responsive navigation bar (navbar) that includes dropdown menus and a mix of regular nav links, demonstrating a practical and common use case of Bootstrap’s nav classes.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Comprehensive Navbar</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNavDropdown” aria-controls=”navbarNavDropdown” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNavDropdown”>
<ul class=”navbar-nav”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Features</a>
</li>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdownMenuLink” role=”button” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Dropdown link
</a>
<div class=”dropdown-menu” aria-labelledby=”navbarDropdownMenuLink”>
<a class=”dropdown-item” href=”#”>Action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<div class=”dropdown-divider”></div>
<a class=”dropdown-item” href=”#”>Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
Explanation
– This navbar is created using the `.navbar` class, which is a responsive container for navigation items.
– The `.navbar-brand` class styles the brand name or logo.
– The `.navbar-toggler` is used for collapsing the navbar on smaller screens (responsive behavior). It targets the element with `id=”navbarNavDropdown”` for toggling.
– Inside the navbar, `.navbar-nav` organizes the navigation items.
– The `.nav-item` and `.nav-link` classes style individual navigation links.
– A dropdown menu is implemented with `.dropdown`, `.dropdown-toggle`, and `.dropdown-menu`. The dropdown toggle is linked to the dropdown menu using `data-toggle=”dropdown”`.
– The inclusion of jQuery, Popper.js, and Bootstrap’s JavaScript at the end of the body is necessary for enabling the responsive toggle and dropdown functionalities.
This example showcases a practical implementation of a responsive navbar that incorporates various Bootstrap nav classes, offering a mix of regular links and dropdown menus. Such a navbar is common in many web applications and websites, providing a clean and intuitive navigation experience.
