Bootstrap Navigation Components

Introduction to Navigation Components

Bootstrap provides a variety of navigation components that help users move through your website or application. These components are responsive, accessible, and customizable to fit your design needs.

Bootstrap Navigation: Includes navbars, navs, tabs, pagination, and breadcrumbs to create consistent navigation experiences.

Navbar

The navbar is a responsive navigation header that includes support for branding, navigation, and more.

Basic Navbar

Navbar Variants

Navbar Placement

You can position your navbar in different ways using Bootstrap's position utilities.

.fixed-top - Fixed to the top of the viewport
.fixed-bottom - Fixed to the bottom of the viewport
.sticky-top - Sticky at the top of the viewport

Navs and Tabs

Navs are a flexible component for navigation. They can be used as simple navigation or as the base for more complex components like tabs.

Basic Nav

Nav Styles

Nav Pills

Nav Tabs

Tabs with Content

This is the home tab content. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

This is the profile tab content. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson.

This is the contact tab content. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.

Breadcrumbs

Breadcrumbs are a navigation aid that shows the user's location in a website or application.

Pagination

Pagination is used to indicate a series of related content exists across multiple pages.

Basic Pagination

Pagination States

Pagination Sizing

Best Practices

✅ Do

Keep navigation consistent across all pages
Use clear, descriptive labels for navigation items
Indicate the current page or section in the navigation
Ensure navigation is accessible with proper ARIA attributes
Test navigation on different screen sizes

❌ Don't

Overcrowd navigation with too many items
Use vague or ambiguous labels
Hide important navigation items in dropdowns on desktop
Use non-standard navigation patterns that may confuse users
Forget to include a way to navigate back to the home page