Bootstrap 5 Navs
Navigation components for tabs and pills
🧠What are Bootstrap Navs?
Bootstrap navs are flexible navigation components that create tabs, pills, and vertical navigation menus. They provide consistent styling and behavior for organizing content into sections, making it easy to switch between different views or pages.
<!-- Basic Nav -->
<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="#">About</a>
</li>
</ul>
Basic Nav
Basic navigation components use the .nav class as a foundation for various navigation patterns. Each navigation item requires .nav-item on the container and .nav-link on the clickable element. Add the .active class to highlight the current page or selection. This simple structure provides the basis for tabs, pills, and other navigation variations. Basic navs are flexible and can be customized with additional utility classes for spacing, alignment, or visual effects. Clean, semantic navigation helps search engines understand your site structure and content hierarchy, potentially improving crawl efficiency and indexation of important pages.
<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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>Output:
🔹 Nav Tabs
Navigation tabs transform basic navigation into a tabbed interface using the .nav-tabs class. Tabs create visual separation between content sections with bottom borders and active state highlighting. This pattern organizes related content into distinct, switchable panels that users can navigate without page reloads. Tabs work well for product details, documentation, dashboard interfaces, or any content that benefits from categorization. Combine with tab content panes using .tab-content and .tab-pane classes for complete functionality. Tabbed interfaces improve content organization and user experience by reducing cognitive load. For SEO, ensure tab content is accessible to search engines through proper implementation.
<ul class="nav nav-tabs">
<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="#">Contact</a>
</li>
</ul>Output:
🔹 Nav Pills
Navigation pills provide an alternative style with rounded background highlights using the .nav-pills class. Active pills display with filled background colors, creating a button-like appearance that clearly indicates the current selection. This style works well for filters, category navigation, or any interface where you want more prominent visual distinction than traditional tabs. Pills can be used horizontally or vertically and adapt well to responsive layouts. Their rounded design creates a softer, more modern aesthetic compared to angular tabs. Well-designed pill navigation improves user interaction clarity and can increase engagement with filtering or categorization features on your site.
<ul class="nav nav-pills">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>Output:
🔹 Vertical Navigation
Vertical navigation stacks items using the .flex-column utility class for sidebar-style layouts. This orientation is ideal for dashboards, admin panels, settings pages, documentation, or any interface requiring hierarchical navigation. Vertical navs conserve horizontal space while providing clear visual hierarchy through indentation or nesting. Combine with tabs or pills styling for different visual effects while maintaining the vertical structure. Responsive vertical navigation can transform to horizontal on mobile devices if needed. Well-structured vertical navigation improves content discoverability and user orientation within complex applications, potentially increasing engagement metrics that influence SEO performance.
<ul class="nav flex-column nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</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>Output:
🔹 Tabs with Content
Interactive tabbed content combines navigation tabs with corresponding content panes for seamless user experience. Use data-bs-toggle="tab" on navigation links and matching IDs on .tab-pane elements wrapped in a .tab-content container. Only the active tab's content displays at any time, creating a clean, organized interface. This pattern reduces page clutter while making related content easily accessible. Tabbed content improves information architecture by grouping related material logically. For SEO, ensure all tab content is accessible to search engine crawlers, either by default or through progressive enhancement techniques. Proper implementation can improve content engagement without negatively affecting search visibility.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">Home</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">Profile</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
<p>Home content here</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Profile content here</p>
</div>
</div>🔹 Fill and Justify
Fill and justify utilities control navigation item distribution within available horizontal space. The .nav-fill class makes items proportional to their content width, while .nav-justified creates equal-width items regardless of content length. These classes help create balanced, full-width navigation bars that adapt to different screen sizes and content variations. Fill navigation works well when items have varying text lengths, while justified navigation creates a uniform, grid-like appearance. Both approaches improve visual consistency and professional appearance. Responsive navigation with proper spacing contributes to better mobile usability, which is increasingly important for SEO as mobile-first indexing becomes standard.
<!-- Nav Fill -->
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>