Nav links
The nav component styles a list of links as a simple horizontal or vertical menu.
In this page:
Syntax
<ul class="nav">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>Nav links
Start with .nav on a ul or nav element, add .nav-item and .nav-link, and use modifiers like .flex-column for vertical stacks, .justify-content-center for centring and .nav-fill for equal widths.
Mark the current page with .active and aria-current, and disable with .disabled.
Note:
Use aria-current="page" on the active link for screen readers.
Example: Nav links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<ul class="nav justify-content-center border-bottom mb-3">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
</ul>
<nav class="nav flex-column" style="width:10rem"><a class="nav-link" href="#">One</a><a class="nav-link" href="#">Two</a></nav>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting nav-link
- Missing active state
- Using div elements for links
Chapter Summary
- .nav, .nav-item, .nav-link
- flex-column stacks
- nav-fill spreads links
- active and disabled states
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: