# 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.

Home Tab Content
Profile Tab Content
Contact Tab Content

Nav pills are also supported in a similar fashion.

Home Tab Content
Profile Tab Content
Contact Tab Content

The Material tab bar web component can also be used alongside Bootstrap's JavaScript plugin.

Home Tab Content
Profile Tab Content
Contact Tab Content

### Related Links

Bootstrap Nav & Tabs Documentation

Bootstrap's nav and tabs documentation page

Related Link arrow_upward
Material Tab Bar Web Component Documentation

Docs for Material's tab bar web component

Related Link arrow_upward