NAVIGATION SYSTEM: Complete reference for all nav variants and states
VARIANTS: Pills | Tabs | Sizes | Fill/Justified | Dropdowns
Navigation components help users move through your application. Pills provide a softer rounded appearance, while tabs offer a traditional interface. Both support active states, sizing, and layout options.
Nav Pills
Nav Pills: Rounded navigation tabs with filled active state. Use for section navigation, filters, or tab interfaces with a modern aesthetic.
Pills with Links
Pills with Buttons
<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active">Active</a></li></ul>
Nav Tabs
Nav Tabs: Traditional tabs with bottom border. Use for classic tabbed interfaces and content sections. The active tab connects to the content below.
Tabs with Links
Tabs with Buttons
<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active">Active</a></li></ul>
Nav Sizes
Sizes: Three size options to match your UI density needs. Combine .nav-sm or .nav-lg with pills or tabs.
Small Pills (.nav-sm)
Default Pills
Large Pills (.nav-lg)
Tab Sizes
<ul class="nav nav-pills nav-sm">...</ul><ul class="nav nav-pills nav-lg">...</ul>
Fill and Justified Layouts
Fill: Nav items proportionally fill available space. Justified: Nav items have equal widths. Use for full-width navigation bars or filters.
Fill Pills (.nav-fill)
Justified Pills (.nav-justified)
Fill Tabs (.nav-fill)
Justified Tabs (.nav-justified)
<ul class="nav nav-pills nav-fill">...</ul><ul class="nav nav-pills nav-justified">...</ul>
Disabled State
Disabled Nav Items: Use .disabled class for links or disabled attribute for buttons. Disabled items have reduced opacity and no pointer events.
Disabled Pills
Disabled Tabs
<a class="nav-link disabled">Disabled</a><button class="nav-link" disabled>Disabled</button>
Dropdown Integration
Nav with Dropdowns: Add .dropdown-toggle to nav links to display dropdown arrows. Useful for nested navigation or actions within nav items.
Pills with Dropdown Indicators
Tabs with Dropdown Indicators
<a class="nav-link dropdown-toggle">Dropdown</a>
Common Usage Patterns
Real-world examples: Typical navigation patterns you'll use in applications.
Content Section Navigation
Filter/Category Navigation
Dashboard Tabbed Interface
Quick Reference
Base: .nav
Variants: .nav-pills (rounded) | .nav-tabs (traditional)
Structure: .nav > .nav-item > .nav-link
Active: .nav-link.active
Disabled: .nav-link.disabled (for <a>) | disabled attribute (for <button>)
Sizes: .nav-sm (small) | default (no class) | .nav-lg (large)
Layouts: .nav-fill (proportional fill) | .nav-justified (equal widths)
Dropdowns: .dropdown-toggle (adds arrow indicator)
Elements: Works with both <a> and <button> elements
Usage: Combine classes like .nav.nav-pills.nav-fill or .nav.nav-tabs.nav-lg