Skip to main content
live This is a new website – your feedback will help us to improve it.

Navigation

Overview

Use the .bsk-nav class to create secondary navigation elements, for splitting content into logical sections or linking to other parts of an application or website.

Each navigation item must use an <a> element.

For assistive technologies, all navigation elements should use a role=navigation attribute on an element which wraps around the element using the .bsk-nav class.

Interactive tabs and pills require the nav JavaScript plugin, which is enabled on this site.

Variants

Pill navigation

Add the .bsk-nav-pills class to create a minimalist navigation element.

<nav role="navigation">
  <ul class="bsk-nav bsk-nav-pills">
    <li role="presentation" class="bsk-active"><a href="#">Pill 1</a></li>
    <li role="presentation"><a href="#">Pill 2</a></li>
    <li role="presentation"><a href="#">Pill 3</a></li>
  </ul>
</nav>

Tab navigation

Add the .bsk-nav-tabs class to create a more structured navigation element.

<nav role="navigation">
  <ul class="bsk-nav bsk-nav-tabs">
    <li role="presentation" class="bsk-active"><a href="#">Tab 1</a></li>
    <li role="presentation"><a href="#">Tab 2</a></li>
    <li role="presentation"><a href="#">Tab 3</a></li>
  </ul>
</nav>

Components

Drop-down menus can be used as navigation items as-is.

<!-- Pills -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-pills">
    <li role="presentation" class="bsk-active"><a href="#">Pill 1</a></li>
    <li role="presentation"><a href="#">Pill 2</a></li>
    <li role="presentation" class="bsk-dropdown">
      <a href="#" class="bsk-dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="bsk-caret"></span></a>
      <ul class="bsk-dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another item</a></li>
      </ul>
    </li>
  </ul>
</nav>
<!-- Tabs -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-tabs">
    <li role="presentation" class="bsk-active"><a href="#">Tab 1</a></li>
    <li role="presentation"><a href="#">Tab 2</a></li>
    <li role="presentation" class="bsk-dropdown">
      <a href="#" class="bsk-dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="bsk-caret"></span></a>
      <ul class="bsk-dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another item</a></li>
      </ul>
    </li>
  </ul>
</nav>

Navigation content

Place the contents of each pill or tab in an element with the .bsk-tab-pane class, with a unique id attribute that corresponds to the target of a pill or tab, which have a data-toggle="tab" attribute.

Wrap all the content sections in an element with the .bsk-tab-content class. Wrap this, and the pills or tabs, in another element with the .bsk-nav-wrapper and either the .bsk-nav-wrapper-pills or .bsk-nav-wrapper-tabs class respectively.

Some extra attributes, shown in these examples, are needed to work with the nav JavaScript plugin.

<!-- Pills -->
<nav class="bsk-nav-wrapper bsk-nav-wrapper-pills" role="navigation">
  <ul class="bsk-nav bsk-nav-pills" role="tablist">
    <li role="presentation" class="bsk-active"><a href="#nav-content-example-1A" role="tab" data-toggle="tab">Pill 1</a></li>
    <li role="presentation"><a href="#nav-content-example-1B" role="tab" data-toggle="tab">Pill 2</a></li>
  </ul>
  <div class="bsk-tab-content">
    <div class="bsk-tab-pane bsk-active" role="tabpanel" id="nav-content-example-1A">
      Content for Navigation example 1 (A)
    </div>
    <div class="bsk-tab-pane" role="tabpanel" id="nav-content-example-1B">
      Content for Navigation example 1 (B)
    </div>
  </div>
</nav>
<!-- Tabs -->
<nav class="bsk-nav-wrapper bsk-nav-wrapper-tabs" role="navigation">
  <ul class="bsk-nav bsk-nav-tabs" role="tablist">
    <li role="presentation" class="bsk-active"><a href="#nav-content-example-2A" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#nav-content-example-2B" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="bsk-tab-content">
    <div class="bsk-tab-pane bsk-active" role="tabpanel" id="nav-content-example-2A">
      Content for Navigation example 2 (A)
    </div>
    <div class="bsk-tab-pane" role="tabpanel" id="nav-content-example-2B">
      Content for Navigation example 2 (B)
    </div>
  </div>
</nav>

States

Active item

Add the .bsk-active class to the navigation item currently active, to highlight where the end user is in the site.

Make sure to include a <span class="bsk-visually-hidden">(current)</span> element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.

<!-- Pills -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-pills">
    <li role="presentation" class="bsk-active"><a href="#">Pill 1</a></li>
    <li role="presentation"><a href="#">Pill 2</a></li>
  </ul>
</nav>
<!-- Tabs -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-tabs">
    <li role="presentation" class="bsk-active"><a href="#">Tab 1</a></li>
    <li role="presentation"><a href="#">Tab 2</a></li>
  </ul>
</nav>

This can also be used within drop-down menus if needed.

<!-- Pills -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-pills">
    <li role="presentation"><a href="#">Pill 1</a></li>
    <li role="presentation"><a href="#">Pill 2</a></li>
    <li role="presentation" class="bsk-dropdown bsk-active">
      <a href="#" class="bsk-dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="bsk-caret"></span></a>
      <ul class="bsk-dropdown-menu">
        <li class="bsk-active"><a href="#">Action</a></li>
        <li><a href="#">Another item</a></li>
      </ul>
    </li>
  </ul>
</nav>
<!-- Tabs -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-tabs">
    <li role="presentation"><a href="#">Tab 1</a></li>
    <li role="presentation"><a href="#">Tab 2</a></li>
    <li role="presentation" class="bsk-dropdown bsk-active">
      <a href="#" class="bsk-dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="bsk-caret"></span></a>
      <ul class="bsk-dropdown-menu">
        <li class="bsk-active"><a href="#">Action</a></li>
        <li><a href="#">Another item</a></li>
      </ul>
    </li>
  </ul>
</nav>

Disabled item

Add the .bsk-disabled class to indicate unavailable navigation items.

It is not safe to rely on this state to prevent users activating disabled actions

Browsers may not enforce these properties, or users may trivially edit the DOM. Server side protections must be used for dangerous actions.

<!-- Pills -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-pills">
    <li role="presentation"><a href="#">Pill 1</a></li>
    <li role="presentation" class="bsk-disabled"><a href="#">Pill 2</a></li>
  </ul>
</nav>
<!-- Tabs -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-tabs">
    <li role="presentation"><a href="#">Tab 1</a></li>
    <li role="presentation" class="bsk-disabled"><a href="#">Tab 2</a></li>
  </ul>
</nav>

Layouts

Stacked pills

Add the .bsk-nav-stacked class to arrange pills vertically.

Stacked tabs are not supported.

<nav role="navigation">
  <ul class="bsk-nav bsk-nav-stacked bsk-nav-pills">
    <li role="presentation"><a href="#">Pill 1</a></li>
    <li class="bsk-active" role="presentation"><a href="#">Pill 2</a></li>
  </ul>
</nav>

Justified pills/tabs

Add the .bsk-nav-justified class to display equally navigation items filling the width of the navigation element. On smaller screens, the navigation items are stacked.

<!-- Pills -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-justified bsk-nav-pills">
    <li role="presentation"><a href="#">Pill 1</a></li>
    <li class="bsk-active" role="presentation"><a href="#">Pill 2</a></li>
  </ul>
</nav>
<!-- Tabs -->
<nav role="navigation">
  <ul class="bsk-nav bsk-nav-justified bsk-nav-tabs">
    <li role="presentation"><a href="#">Tab 1</a></li>
    <li class="bsk-active" role="presentation"><a href="#">Tab 2</a></li>
  </ul>
</nav>