# Bootstrap 6 Nav > Documentation and examples for how to use CoreUI for Bootstrap's included navigation components. ## Base nav Navigation available in CoreUI share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. > The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. > > To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set. ```html

``` Classes are used throughout, so your markup can be super flexible. Use `

` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup. ```html ``` ## Available styles Change the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own. ### Horizontal alignment Change the horizontal alignment of your nav with [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/justify-content/). By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with `.justify-content-center`: ```html

``` Right-aligned with `.justify-content-end`: ```html

``` ### Vertical Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`). ```html

``` As always, vertical navigation is possible without `

`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `` elements. ```html ``` For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width. ```html

``` Similar to the `.nav-fill` example using a `

`-based navigation. ```html ``` Either class also stretches an [enclosed nav](#enclosed), which otherwise stays as wide as its links. ## Variants A [theme class](https://coreui.io/bootstrap/docs/customize/components/#theme-variants) recolors a nav. Every link reads the theme's foreground; what marks the active one follows the variant — a tint on the base nav, a solid fill on pills, the line on either underline. ```html

``` ```html

``` ## Working with flex utilities If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/bootstrap/docs/utilities/flex/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. ```html ``` ## Regarding accessibility If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `

` element around the whole navigation. Do not add the role to the `