Nav
Navs Navigation available in Bootstrap share general markup and styles, from the base <b-nav> class to the active and disabled states. Swap modifier props to switch between each style. See documentation.
Navs
<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>Tab style
<div>
<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>
</div>Make the nav look like tabs by setting the tabs prop.
Pill style
<div>
<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>
</div>Use the pill style by setting the pills prop.
Fill
<div>
<b-nav tabs fill>
<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>
</div> 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.
Justified
<div>
<b-nav tabs justified>
<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>
</div> For equal-width elements, set the justified prop instead. All horizontal space will be occupied by nav links, but unlike fill above, every <b-nav-item> will be the same width.