Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
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.
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.
Vertical Alignment
The flex-column class vertically aligns the nav items, stacking them in a column
instead of the default horizontal layout.
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.
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.
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.
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-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.
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.
Dropdowns
You can also add a dropdown menu within the navbar by using the dropdown class and
dropdown-toggle to trigger the menu.