##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Navs and Tabs

Bootstrap's navigation components offer flexible and responsive solutions for organizing content and enhancing user experience. From simple navigation bars to complex tabbed interfaces, these components provide various styling options and layouts to create intuitive navigation systems that adapt seamlessly across different screen sizes.

### Base Navigation

The base navigation component demonstrates the fundamental structure using `nav` class. Each navigation item (`nav-item`) contains a link (`nav-link`) with optional icons for enhanced visual hierarchy. The `aria-current` attribute indicates the active page for accessibility.

Base Navigation with Icons
Loading...
Base Navigation with Icons
Loading...

### Available Styles

Bootstrap's navigation system provides multiple styling options to create visually distinct and functional navigation patterns. Each style can be enhanced with icons and customized to match your application's design language.

### Horizontal Alignment

Control the horizontal positioning of navigation items using Bootstrap's justify-content utilities. The `justify-content-center` class centers items, while `justify-content-end` aligns them to the right.

Centered Navigation
Loading...
Centered Navigation
Loading...
Right-Aligned Navigation
Loading...
Right-Aligned Navigation
Loading...

### Vertical Alignment

The `flex-column` class vertically aligns the nav items, stacking them in a column instead of the default horizontal layout.

Vertical Alignment
Loading...
Vertical Alignment
Loading...

### Tabs

Tabs are created using the `nav` class with `nav-tabs`, providing a tabbed navigation interface where each tab can link to different content sections.

Tabs
Loading...
Tabs
Loading...

### Pills

Pills are similar to tabs but have a rounded, "pill" shape. They are created using the `nav` class with `nav-pills` to style the navigation items as pill-shaped buttons.

Pills
Loading...
Pills
Loading...

### Underline

The `nav-underline` class adds an underline style to navigation links, providing a clear visual indicator of the active tab or link, improving navigation clarity for users.

Underline
Loading...
Underline
Loading...

### Fill and justify

The combination of `nav`, `nav-pills`, and `nav-fill` creates a navigation menu where the pill-styled links are evenly distributed across the available width, filling the container.

Nav Fill
Loading...
Nav Fill
Loading...

`nav-justified` makes each navigation item take up an equal width, ensuring that the items are spaced evenly across the entire navbar, filling the available space.

Nav Justified
Loading...
Nav Justified
Loading...

### Flex utilities

This code uses Bootstrap's flex utilities to create a responsive vertical and horizontal navigation. The `flex-column` class stacks the nav items vertically on smaller screens, while `flex-sm-row` changes the layout to horizontal on larger screens. Each `flex-sm-fill` class ensures that each nav item takes equal width in the horizontal layout, and `text-sm-center` centers the text in the items when displayed as rows.

Flex Utilities
Loading...
Flex Utilities
Loading...

### Dropdowns

You can also add a dropdown menu within the navbar by using the `dropdown` class and `dropdown-toggle` to trigger the menu.

### Tabs with dropdowns

Tabs with Dropdowns
Loading...
Tabs with Dropdowns
Loading...

### Pills with dropdowns

Pills with Dropdowns
Loading...
Pills with Dropdowns
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates