Navigation
Navigation menus make it easy to explore and switch between different content and views.
Base Nav
The base nav component from Bootstrap acts as a foundation for building all types of other navigation components.
The
.nav
component is built with flexbox. Bootstrap's flex utilities can be used to change the positioning of the component. For example, the nav component can be centered, shown below.
The component can be aligned to the right as well.
Or alternatively, the component can be modified to show vertically.
All of the above examples use an unordered list element and list items, but using the
<ul>
and
<li>
elements are not required in situations where the list context isn't necessary.
Tabs
The tabs styling for the nav component is one variation of presenting a simple navigation. Simply add the
.nav-tabs
class to the nav component to use this option. The nav tabs retain most of their Bootstrap default styling, except the ripple effect has been added.
Pills
The pills styling for the nav component is another variation for structuring navigation. Simply add the
.nav-pills
class to the nav component to use this option. This option also retains much of it's Bootstrap default styling, wtih the addition of the ripple effect.
Flex utilities can be used with pills to make the menu fill the full available width of the components parent using the
.nav-fill
class.
To expand on the above examples and to see more options available with Bootstrap's nav component, visit Bootstrap's nav and tabs documentation page.
Tab Bar
The tab bar web component has been brought into this theme from the Material Web Components library as another option for navigation menus. This web component is a reusable, custom element that has its functionality encapsulated away from the rest of the code, making it easy to implement and use quickly.
Material Icons are also supported within the Material tab bar web component.
Additional styling and configuration options are available when using this component like sizing, icons, images, preselection, and others. Visit the Material Web Components Catalog to explore more options for the tab bar web component.
JavaScript Behavior
Bootstrap includes JavaScript behavior that gives the nav component extended functionality to include tabbable panes of local content. The examples below are enabled using data attributes within the HTML, but JavaScript behavior is also supported.
Nav pills are also supported in a similar fashion.
The Material tab bar web component can also be used alongside Bootstrap's JavaScript plugin.
Related Links
Bootstrap's nav and tabs documentation page
Docs for Material's tab bar web component