# Navs > Navigation available in Bootstrap share general markup and styles, from the base `` class > to the `active` and `disabled` states. Swap modifier props to switch between each style. ```html
Active Link Another Link Disabled
``` ## Overview The base `` component is built with flexbox and provides 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. No active states are included in the base nav. `` supports the following child components: - `` for actionable links (or router-links) - `` for dropdowns - `` for plain text content - `` for inline forms ## Link appearance Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These variants are mutually exclusive - use only one style or the other. ### Tab style Make the nav look like tabs by setting the `tabs` prop. ```html
Active Link Another Link Disabled
``` ### Pill style Use the pill style by setting the `pills` prop. ```html
Active Link Another Link Disabled
``` ### Small Make the nav smaller by setting the `small` prop. ```html
Active Link Another Link Disabled
``` ## Fill and justify Force your `` content to extend the full available width. ### Fill To proportionately fill all available space with your `` components, set the `fill` prop. Notice that all horizontal space is occupied, but not every nav item has the same width. ```html
Active Link Link with a long name Disabled
``` ### Justified For equal-width elements, set the `justified` prop instead. All horizontal space will be occupied by nav links, but unlike `fill` above, every `` will be the same width. ```html
Active Link Link with a long name Disabled
``` ## Alignment To align your `` components, use the `align` prop. Available values are `left`, `center` and `right`. ```html
Active Link Link with a long name Disabled
``` ## Vertical variation By default `` appear on a horizontal line. Stack your navigation by setting the `vertical` prop. ```html
Active Link Another Link Disabled
``` ## Dropdown support Use `` to place dropdown items within your nav. ```html
Active Link One Two Three
``` Sometimes you want to add your own class names to the generated dropdown toggle button, that by default have the classes `nav-link` and `dropdown-toggle`. Use the `toggle-class` prop to add them (like above) which will render HTML similar to: ```html ``` Refer to [``](/docs/components/dropdown) for a list of supported sub-components. ### Optionally scoped default slot The dropdown default slot is optionally scoped with the following scope available: | Property or Method | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | `hide()` | Can be used to close the dropdown menu. Accepts an optional boolean argument, which if `true` returns focus to the toggle button | ### Lazy dropdown By default, `` renders the menu contents in the DOM even when the menu is not shown. When there are a large number of dropdowns rendered on the same page, performance could be impacted due to larger overall memory utilization. You can instruct `` to render the menu contents only when it is shown by setting the `lazy` prop to true. ### Dropdown placement Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to control the positioning of ``. Refer to the [`` positioning section](/docs/components/dropdown#positioning) for details on the effects and usage of these props. ### Dropdown implementation note Note that the toggle button is actually rendered as a link `` tag with `role="button"` for styling purposes, and typically has the `href` set to `#` unless an ID is provided via the `id` prop. The toggle will prevent scroll-top-top behaviour (via JavaScript) when clicking the toggle link. In some cases when using SSR, and the user clicks the toggle button _before_ Vue has had a chance to hydrate the component, the page will scroll to top. In these cases, simply providing a unique ID via the `id` prop will prevent the unwanted scroll-to-top behaviour. ## Nav text content Use the `` child component to place plain text content into the nav: ```html
Link 1 Link 2 Plain text
``` ## Nav inline forms Use the `` child component to place an _inline_ form into the nav: ```html
Link 1 Link 2 Ok
``` Refer to the [`` inline](/docs/components/form#inline-form) documentation for additional details on placing form controls. ## Tabbed local content support See the [``](/docs/components/tabs) component for creating tabbable panes of local content (not suited for navigation). ## Card integration Use a `` in a [``](/docs/components/card) header, by enabling the `card-header` prop on `` and setting either the `pills` or `tabs` props: **Tabs style:** ```html
Active Inactive Disabled With supporting text below as a natural lead-in to additional content. Go somewhere
``` **Pill style:** ```html
Active Inactive Disabled With supporting text below as a natural lead-in to additional content. Go somewhere
``` **Plain style:** The `card-header` prop is only needed when you are applying `tabs` or `pills` style. Note that Bootstrap v4 SCSS does not have special styling for `active` state plain style nav items. ```html
Active Inactive Disabled With supporting text below as a natural lead-in to additional content. Go somewhere
``` The `card-header` prop has no styling effect if the `` is in `vertical` mode. ### Using with Vue Router Have your card `` control vue router nested routes via `` or `` components, to created tabbed content that changes with route URL: ```html // On page with route `/some/route`
Active Foo Bar
``` Note: Vue Router does not support defining active routes with hashes (`#`), which is why you must define the "tab" content as child routes. **Example router config for above:** ```js const routes = [ { path: '/some/route', // We don't provide a name on this parent route, but rather // set the name on the default child route instead // name: 'some-route', component: SomeRouteComponent, // Child route "tabs" children: [ // Note we provide the above parent route name on the default child tab // route to ensure this tab is rendered by default when using named routes { path: '', component: DefaultTabComponent, name: 'some-route' }, { path: 'foo', component: FooTabComponent }, { path: 'bar', component: BarTabComponent } ] } ] ``` One can also use Vue Router [named routes](https://router.vuejs.org/guide/essentials/named-routes.html#named-routes) and/or route params instead of path based routes. For more details see: - [Vue Router ``](https://router.vuejs.org/api/#router-view) - [Nuxt.JS ``](https://nuxtjs.org/api/components-nuxt-child) ## Accessibility If you're using `` to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of ``, or wrap a `