How to use a Bootstrap list group for navigation

Yes, Bootstrap's list group can be used as navigation. 1. Use the list-group and list-group-item-action classes to add clickable visual effects and interactive states to each project; 2. Identify the current location by adding active classes to the links of the current page; 3. Optionally add icons or badges to enhance information display; 4. Optionally use JavaScript to dynamically switch active states to achieve navigation in single-page applications; 5. Place the list group in responsive layouts such as sidebars, combining grids or elastic layouts to achieve overall page structure; when block-level, spacing navigation items are required, list group is preferred, while compact tabbed navigation uses nav components, so list group is an efficient solution to create simple sidebar navigation.

Bootstrap's list group is a flexible and lightweight component for displaying a series of content, and while it's not designed specifically for navigation like the nav or navbar components, you can absolutely use a list group to create simple, clean navigation menus—especially in sidebars or dashboards.

Here's how to turn a Bootstrap list group into functional navigation:

1. Use list-group with list-group-item-action

Start with a basic ul or div -based list group and apply the list-group-item-action class to each item. This adds hover, focus, and active states that make the items feel clickable—perfect for navigation.

 <div class="list-group">
  <a href="#home" class="list-group-item list-group-item-action active">Home</a>
  <a href="#profile" class="list-group-item list-group-item-action">Profile</a>
  <a href="#messages" class="list-group-item list-group-item-action">Messages</a>
  <a href="#settings" class="list-group-item list-group-item-action">Settings</a>
</div>

Using <a> tags ensures semantic correctness for navigation and enables keyboard accessibility (users can tab through links).

2. Make items act as active based on current page

To indicate the current page or section, add the active class to the relevant item. You can do this manually or dynamically via JavaScript or server-side logic.

 <a href="#profile" class="list-group-item list-group-item-action active">Profile</a>

When active:

• The item gets a colored background (default blue in Bootstrap).
• It shows the user their current location.

You can customize the active style in CSS if the default doesn't match your design.

3. Enhance with icons or badges (optional)

You can enrich navigation by adding icons or notification badges.

 <a href="#messages" class="list-group-item list-group-item-action">
  <i class="bi bi-envelope"></i> Messages 
  <span class="badge bg-primary float-end">4</span>
</a>

This works well for dashboards where you want to show unread counts or status indicators.

4. Use JavaScript for dynamic behavior (optional)

If you want to update the active state when users click (without page reloads), use a bit of JavaScript:

 document.querySelectorAll('.list-group-item-action').forEach(item => {
  item.addEventListener('click', function () {
    document.querySelector('.list-group-item.active')?.classList.remove('active');
    this.classList.add('active');
  });
});

This removes the active class from any currently active item and sets it on the one just clicked.

Note: If you're using real page navigation (not single-page), you don't need JavaScript—just ensure the correct link has active on each page load.

5. Responsive placement (eg, in a sidebar)

Commonly, list group navigation lives in a sidebar. Combine it with Bootstrap's grid or flex utilities:

 <div class="row">
  <div class="col-md-3">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active">Dashboard</a>
      <a href="#" class="list-group-item list-group-item-action">Orders</a>
      <a href="#" class="list-group-item list-group-item-action">Customers</a>
      <a href="#" class="list-group-item list-group-item-action">Reports</a>
    </div>
  </div>
  <div class="col-md-9">
    <!-- Main content -->
  </div>
</div>

This creates a two-column layout ideal for admin panels.

When to use list group vs. nav

• Use list group when you want block-level items with padding, borders, and visual separation—great for longer labels or when mixing in badges/icons.
• Use nav pills / tabs when you want a more compact, inline or vertical tab-like interface.

Basically, if you need a simple, clean, and readable side menu—especially in a dashboard—the list group is a solid, low-effort choice. Just use anchor tags, add list-group-item-action , manage the active state, and you've got usable navigation.

The above is the detailed content of How to use a Bootstrap list group for navigation. For more information, please follow other related articles on the PHP Chinese website!