Navigation menus make it easy to explore and switch between different content and views.
The base nav component from Bootstrap acts as a foundation for building all types of other navigation components.
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
elements are not required in situations where the list context isn't necessary.
The tabs styling for the nav component is one variation of presenting a simple navigation. Simply add the
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.
The pills styling for the nav component is another variation for structuring navigation. Simply add the
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
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.
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.
Nav pills are also supported in a similar fashion.