Nav

Navigation lists styled as plain links, tabs, pills or underlines. To switch panels, use tabs instead.

Bootstrap’s nav docs describe the markup and CSS.

Example

bsNav adds .nav, and bsNavLink adds .nav-link. active sets aria-current="page", and disabled takes a link out of the tab order.

HTML

<ul bsNav aria-label="Basic nav">
  <li class="nav-item"><a bsNavLink active href="#">Active</a></li>
  <li class="nav-item"><a bsNavLink href="#">Link</a></li>
  <li class="nav-item"><a bsNavLink href="#">Link</a></li>
  <li class="nav-item"><a bsNavLink disabled>Disabled</a></li>
</ul>

Tabs, pills and underline

Set variant to tabs, pills or underline.

HTML

<div class="vstack gap-3">
  @for (variant of variants; track variant) {
    <ul bsNav [variant]="variant" [attr.aria-label]="`${variant} nav`">
      <li class="nav-item"><a bsNavLink active href="#">Active</a></li>
      <li class="nav-item"><a bsNavLink href="#">Link</a></li>
      <li class="nav-item"><a bsNavLink disabled>Disabled</a></li>
    </ul>
  }
</div>

Vertical, fill and justify

vertical stacks the links. fill and justified stretch them across the width, with justified making every item the same width.

HTML

<div class="vstack gap-3">
  <nav bsNav variant="pills" vertical aria-label="Vertical nav" style="max-width: 12rem">
    <a bsNavLink active href="#">Active</a>
    <a bsNavLink href="#">Link</a>
    <a bsNavLink href="#">Link</a>
  </nav>
  <nav bsNav variant="pills" justified aria-label="Justified nav">
    <a bsNavLink active href="#">Active</a>
    <a bsNavLink href="#">Much longer nav link</a>
    <a bsNavLink href="#">Link</a>
  </nav>
</div>

API

BsNav

Selector: [bsNav]

Inputs

Name	Type	Default	Description
`variant`	`'tabs' \| 'pills' \| 'underline' \| null`	`null`	Style of the links.
`vertical`	`boolean`	`false`	Stacks the links.
`fill`	`boolean`	`false`	Stretches the items, each as wide as its content.
`justified`	`boolean`	`false`	Stretches the items to the same width.

BsNavLink

Selector: a[bsNavLink], button[bsNavLink]

Inputs

Name	Type	Default	Description
`active`	`boolean`	`false`	Marks the current link.
`disabled`	`boolean`	`false`	Disables the link.
`current`	`string`	`'page'`	Value of aria-current when active.