Properties
Property | Type | Default Value |
---|---|---|
tag | String | ul |
fill | Boolean | false |
justified | Boolean | false |
tabs | Boolean | false |
pills | Boolean | false |
vertical | Boolean | false |
is-nav-bar | Boolean | false |
Navigation available in Bootstrap share general markup and styles, from the base
<b-nav>
class to theactive
anddisabled
states. Swap modifier props to switch between each style.
<div>
<b-nav>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
</div>
<!-- nav-default.vue -->
The base <b-nav>
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.
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.
Make the nav look like tabs by setting the prop tabs
.
<b-nav tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<!-- nav-tabs.vue -->
Use the pill style by setting the prop pills
.
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<!-- nav-pills.vue -->
Force your b-nav
content to extend the full available width.
To proportionately fill all available space with your <b-nav-item>
components,
set the fill
prop. Notice that all horizontal space is occupied, but not
every nav item has the same width.
<b-nav fill tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Link with a long name </b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<!-- nav-fill.vue -->
For equal-width elements, set prop justified
instead. All horizontal space
will be occupied by nav links, but unlike fill
above, every <b-nav-item>
will be the same width.
<b-nav justified tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Link with a long name </b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<!-- nav-justified.vue -->
By default <b-nav>
appear on a horizontal line. Stack your navigation by setting
the vertical
prop.
<b-nav vertical class="w-25">
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<!-- nav-vertical.vue -->
Use <b-nav-item-dropdown>
to place dropdown items within your nav.
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
<!-- nav-dropdown.vue -->
Sometimes you want to add your own class names to the generated dropdown toggle button, that by default has
the classes nav-link
and dropdown-toggle
. Use the extra-toggle-classes
prop to add them (like above) which
will produce something like:
<li id="nav7_ddown" class="nav-item b-nav-dropdown dropdown">
<a href="#" id="nav7_ddown__BV_button_" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle nav-link-custom">
</a>
...
</li>
Refer to <b-dropdown>
for a list of supported sub-components.
<b-nav-item-dropdown>
Component Alias<b-nav-item-dropdown>
can be used via it's shorter aliases of <b-nav-item-dd>
and <b-nav-dd>
.
Using <b-nav>
within a <b-navbar>
has been deprecated as of Bootstrap-Vue v1.0.0-beta.10.
Please use the <b-navbar-nav>
component instead.
Prop is-nav-bar
has been deprecated and will be removed in a future release.
See the <b-tabs>
component for creating tabbable panes of local
content (not suited for navigation).
If you’re using <b-nav>
to provide a navigation bar, be sure to add a
role="navigation"
to the most logical parent container of <b-nav>
, or wrap
a <nav>
element around <b-nav>
. Do not add the role to the <b-nav>
itself,
as this would prevent it from being announced as an actual list by assistive technologies.
When using a <b-nav-item-dropdown>
in your <b-nav>
, be sure to assign a unique id
prop value to the <b-nav-dropdown>
so that the appropriate aria-*
attributes can
be automatically generated.
<b-tabs>
to create tabbable panes of local content, even via dropdown menus.<b-navbar>
a wrapper that positions branding, navigation, and other elements in a concise header.<b-dropdown>
for sub-components that you can place inside <b-nav-item-dropdown>
<b-nav-item>
<b-nav>
Property | Type | Default Value |
---|---|---|
tag | String | ul |
fill | Boolean | false |
justified | Boolean | false |
tabs | Boolean | false |
pills | Boolean | false |
vertical | Boolean | false |
is-nav-bar | Boolean | false |
.native
modifier to capture browser native events such as:
@click.native="..."
,
@mouseover.native="..."
, etc. See the the official
Vue.js documentation
for more information.
<b-nav-item>
Property | Type | Default Value |
---|---|---|
href | String | |
rel | String | |
target | String | _self |
active | Boolean | false |
active-class | String | active |
append | Boolean | false |
disabled | Boolean | false |
event | String or Array | click |
exact | Boolean | false |
exact-active-class | String | active |
replace | Boolean | false |
router-tag | String | a |
to | String or Object |
<b-nav-text>
Property | Type | Default Value |
---|---|---|
tag | String | span |
<b-nav-form>
Property | Type | Default Value |
---|---|---|
id | String |
<b-nav-item-dropdown>
Property | Type | Default Value |
---|---|---|
id | String | |
disabled | Boolean | false |
text | String | |
dropup | Boolean | false |
right | Boolean | false |
offset | Number or String | 0 |
no-flip | Boolean | false |
popper-opts | Object | |
no-caret | Boolean | false |
extra-toggle-classes | String | |
role | String | menu |
Component | Import Path |
---|---|
<b-nav> | bootstrap-vue/es/components/nav/nav |
<b-nav-item> | bootstrap-vue/es/components/nav/nav-item |
<b-nav-text> | bootstrap-vue/es/components/nav/nav-text |
<b-nav-form> | bootstrap-vue/es/components/nav/nav-form |
<b-nav-item-dropdown> | bootstrap-vue/es/components/nav/nav-item-dropdown |
Example:
import bNav from 'bootstrap-vue/es/components/nav/nav';
Vue.component('b-nav', bNav);
This plugin includes all of the above listed individual components. Plugins also include any component aliases.
import { Nav } from 'bootstrap-vue/es/components';
Vue.use(Nav);
This plugin also automatically includes the following plugins:
Dropdown