• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Navs

← Previous Next →

Navigation is a core part of any website or web application, helping users move between pages and sections efficiently. Bootstrap 4 provides the Navs component, a flexible and responsive way to create horizontal or vertical navigation menus. Navs can be combined with tabs, pills, and other Bootstrap components to build professional-looking interfaces. This tutorial covers everything you need to know about BS4 Navs, from basic structure to advanced customization.

What Are Navs?

Navs are a collection of links arranged in a horizontal or vertical layout. They are built using <ul> elements with the .nav class and <li> elements with .nav-item. Links within nav items use the .nav-link class. Navs can be styled as tabs or pills, and can include active states, disabled links, and responsive alignment.

Basic Nav

A simple horizontal navigation menu uses the .nav class with list items:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

The .active class highlights the current page or selection, helping users identify their location.

Vertical Nav

You can create vertical navigation menus by adding the .flex-column class to the .nav element:

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

Vertical navs are useful for sidebars or menus in dashboards and admin panels.

Navs with Tabs

Bootstrap 4 allows navs to function as tabs using .nav-tabs. Tabs display content in a card-like style and are ideal for sectioned content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">Home content here.</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">Profile content here.</div>
</div>

Tabs are perfect for forms, FAQs, or multi-step content sections.

Navs with Pills

Pills provide a rounded, highlighted style for nav links using .nav-pills. Pills can be used horizontally or vertically.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

Pills are often used for filters, category selection, or feature tabs.

Navs with Disabled Links

Links can be disabled using the .disabled class. Disabled links are visually dimmed and cannot be clicked.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Disabled links provide clear feedback to users about unavailable options.

Navs with Justified Alignment

Nav links can be evenly spaced across the width of the container using .nav-justified. This is useful for menus or navigation bars that span the full width.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

Navs with Fill

Alternatively, use .nav-fill to make nav links occupy equal width without the justified styling.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

Fill is useful for responsive layouts and evenly spaced navigation elements.

Best Practices

  1. Keep navigation labels short and descriptive.

  2. Use .active to indicate the current page.

  3. Use vertical navs for sidebars and horizontal navs for headers.

  4. Choose tabs or pills depending on visual style and use case.

  5. Ensure proper contrast and accessibility for all nav links.

Practical Examples

  • Top Navigation Bar: Horizontal menu in the header with links to Home, Profile, Messages.

  • Sidebar Navigation: Vertical nav in admin dashboards or settings panels.

  • Tabbed Content: Switch between different sections of a page using tabs.

  • Filter Options: Use pills to allow users to select categories or filters.

  • Multi-step Forms: Display form steps as nav items for better UX.

Summary of the Tutorial

Bootstrap 4 navs provide a flexible way to create horizontal or vertical navigation menus. They can be styled as tabs or pills, aligned using justified or fill classes, and include active or disabled states. Using navs effectively improves website usability, organizes content, and ensures a clean and professional interface.

Practice Questions

  1. Create a basic horizontal nav with three links: Home, Profile, Messages.

  2. Create a vertical nav using .flex-column with three links.

  3. Create a nav with tabs using .nav-tabs and display two corresponding content sections.

  4. Create a nav with pills using .nav-pills and set the second pill as active.

  5. Create a nav with one disabled link and two active links.

  6. Create a nav with justified alignment using .nav-justified.

  7. Create a nav with fill alignment using .nav-fill.

  8. Create a tabbed interface with three tabs and show content when each tab is clicked.

  9. Create a vertical pill navigation on the left with content on the right.

  10. Create a nav inside a card header, combining tabs and active states for content switching.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top