Core Code
Core Code Modern Dev Handbook

Sidebar Menu Example

Use list groups to create a simple sidebar navigation menu.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<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">
Settings
</a>

</div>

</div>

<div class="col-md-9">

<h4>Main Content</h4>
<p>This area represents the page content.</p>

</div>

</div>

</div>

</body>
</html>

More BS5 List Groups Examples (7)

example Basic List Group open example example Active List Item open example example Disabled List Item open example example Linked List Group open example example Flush List Group open example example List with Badges open example example Horizontal List Group open example