To add a side navigation bar to a web page, use Bootstrap 5 to implement it in the following steps: 1. Use the grid system to build a two-column layout, with the sidebar on the left and the main content area on the right; 2. Use the nav component to build a vertical navigation menu, and use the flex-column class to achieve vertical arrangement; 3. If you need a mobile folding effect, you can combine the Collapse plug-in to achieve responsive switching; 4. Add custom CSS styles to optimize details such as scrolling, hovering and activation status. The structure is clear and the class name is correct to quickly build the responsive sidebar.

If you want to add a side navigation bar to the web page, Bootstrap 5 actually provides a lot of ready-made components and classes, which can be done with just a little adjustment of the structure and style. The point is to make good use of its layout system and built-in navigation components.

Basic structure: Use grid layout to build frames

Bootstrap's grid system is very suitable for building page structure. It is usually done by layouting with two columns, with the sidebar on the left and the main content area on the right. You can write this way:

 <div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
      <!-- Sidebar content is here->
    </nav>
    <main class="col-md-9 col-lg-10 ms-sm-auto px-md-4">
      <!-- Main content area-->
    </main>
  </div>
</div>

Sidebar navigation: implemented using the nav component

Bootstrap's .nav class is very suitable for menu making. You can use it directly to build a vertical navigation bar:

 <nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
  <div class="position-sticky pt-3">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
  </div>
</nav>

Optional function: Add a folding menu (suitable for mobile)

If you want to put the sidebar away on the small screen, you can use Bootstrap's Collapse plugin to achieve responsive folding. The general structure is as follows:

 <button class="btn btn-toggle d-md-none collapsed" data-bs-toggle="collapse" data-bs-target="#sidebarMenu">
  Toggle sidebar
</button>

<div class="collapse d-md-block" id="sidebarMenu">
  <ul class="nav flex-column">
    <!-- Menu Items-->
  </ul>
</div>

Style optimization: add points to custom CSS to look better

While Bootstrap provides default styles, the sidebar usually requires some extra customization, such as fixed height, scroll bar, hover effect, etc. You can add some CSS:

 .sidebar {
  height: 100vh;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding-top: 56px; /* If fixed top navigation*/
}

.nav-link.active {
  background-color: #f1f1f1;
  font-weight: bold;
}

Basically that's it. Using Bootstrap 5 as a sidebar is not complicated, but some details are easy to ignore, such as responsive switching, scrolling behavior, style overlay, etc. As long as the structure is clear and the class name is used correctly, it is still very convenient to implement.

The above is the detailed content of How to create a sidebar navbar with Bootstrap 5?. For more information, please follow other related articles on the PHP Chinese website!