` tag. You can override the tag type by setting the `tag` prop to the element you would like rendered: ```html

BootstrapVue

``` ```html

BootstrapVue

``` Adding images to the `` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate: ```html

``` ```html

BootstrapVue

``` ### `` Navbar navigation links build on the `` parent component and requires the use of `` and `` toggler for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. `` supports the following child components: - `` for link (and router-link) action items - `` for adding vertically centered strings of text. - `` for navbar dropdown menus - `` for adding simple forms to the navbar. ### `` `` is the primary link (and ``) component. Providing a `to` prop value will generate a `` while providing an `href` prop value will generate a standard link. Set the `` `active` prop will highlight the item as being the active page, Disable a `` by setting the prop `disabled` to true. Handle click events by specifying a handler for the `@click` event on ``. ### `` Navbars may contain bits of text with the help of ``. This component adjusts vertical alignment and horizontal spacing for strings of text. ```html

BootstrapVue

Navbar text

``` ### `` For `` usage, see the [``](/docs/components/dropdown) docs. Note split dropdowns are not supported in `` and ``. ```html

Home

Account

Settings

``` ### `` Use `` to place inline form controls into your navbar ```html

``` Input groups work as well: ```html

``` ### `` and `` Navbars are not responsive by default, but you can easily modify them to change that. Responsive behavior depends on our `` component. Wrap `` components in a `` (**remember to set the `is-nav` prop!**) to specify content that will collapse based on a particular breakpoint. Assign a document unique `id` value on the ``. Use the `` component to control the collapse component, and set the `target` prop of `` to the `id` of ``. Set the `toggleable` prop on `` to the desired breakpoint you would like content to automatically expand at. Possible `toggleable` values are `sm`, `md`, `lg` and `xl`. Setting `toggleable` to `true` (or an empty string) will set the navbar to be always collapsed, while setting it to `false` (the default) will disable collapsing (always expanded). `` components are left-aligned by default, but should they follow a sibling element like ``, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. See the first example on this page for reference, and also refer to [``](/docs/components/collapse) for details on the collapse component. Besides being used to control a collapse, the `` can also be used to toggle visibility of the [``](/docs/components/sidebar) component. Just specify the ID of the `` via the `target` prop. Internally, `` uses the [`v-b-toggle` directive](/docs/directives/toggle). #### Custom navbar toggle `` renders the default Bootstrap v4 _hamburger_ (which is a background SVG image). You can supply your own content (such as an icon) via the optionally scoped `default` slot. The default slot scope contains the property `expanded`, which will be `true` when the collapse is expanded, or `false` when the collapse is collapsed. Note that the `expanded` scope property only works when supplying the `target` prop as a `string`, and not an `array`. ```html ``` ## Printing Navbars are hidden by default when printing. Force them to be printed by setting the `print` prop. ## See also - [`` component](/docs/components/collapse) - [`` component](/docs/components/sidebar) - [`v-b-toggle` directive](/docs/directives/toggle) - [`` documentation](/docs/components/nav) for additional components and sub-component aliases Refer to the [Router support](/docs/reference/router-links) reference page for router-link specific props.