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

Navbar

Overview

Use the .bsk-navbar class to create navigation bars used for primary, horizontal, navigation. They can contain links, drop-down menus, forms and other components.

Navbars are designed to scale with screen size. At small sizes key items will be shown normally, with less important items shown in a hidden menu, which can be toggled with a button. At larger sizes, all elements are shown directly.

Navbars are relatively heavy elements, requiring significant markup and JavaScript plugins to work correctly. Where this isn’t possible, or suitable, the header component can be used instead.

Overflowing content

The navbar component is not aware of the width of items that sit within it. This means it is possible for items to overflow onto a second level, breaking the page layout and looking bad.

This problem worsens as the screen size narrows, and worst just before the small grid size. Past this point, the navbar will hide elements and so reduce pressure on the number of items that need to be shown.

There is no way to automatically detect when this overflow happens, and so requires manual testing at multiple screen sizes to ensure things work correctly.

Variants

Default navbar

This variant is used as part of the standard header pattern.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-active"><a href="#">Home <span class="bsk-sr-only">(current)</span></a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</nav>

Usage

A right aligned navigation menu with a drop-down menu item should be used in all navbars to indicate a website or application is part of BAS. This menu is known as the navigation launcher.

The navigation launcher must use the text ‘Part of British Antarctic Survey’.

The navigation launcher must contain links to:

Other links may be added after these required items.

A version of the navigation launcher for internal websites and applications is still under development.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <ul class="bsk-nav bsk-navbar-nav bsk-navbar-right">
      <li class="bsk-dropdown">
        <a href="#" class="bsk-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Part of British Antarctic Survey <span class="bsk-caret"></span></a>
        <ul class="bsk-dropdown-menu">
          <li><a href="https://www.bas.ac.uk">BAS Home</a></li>
          <li><a href="https://data.bas.ac.uk">Discover BAS data</a></li>
          <li><a href="#">Another service (optional)</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Components

Item

Use a list of <a> elements within a navigation menu using the .bsk-nav .bsk-navbar-nav classes.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>

Hidden items menu

At small screen sizes, a button is used to show or hide extra navbar items in a vertical menu.

This example simulates the menu button at all sizes.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <!-- The '.bsk-docs-navbar-toggle-always' class is used instead of '.bsk-navbar-toggle' for demonstration purposes -->
      <button type="button" class="bsk-docs-navbar-toggle-always bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-3" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
    </div>
  </div>
</nav>

This example is real but will only work at small screen sizes.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <button type="button" class="bsk-navbar-toggle bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-2" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
    </div>
  </div>
</nav>

Brand text

Use the .bsk-navbar-brand class to indicate the name of the current website or service.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
  </div>
</nav>

Brand image

Use the same .bsk-navbar-brand class with a image a logo or other image.

To look right, scale the logo or image so that its height is one of these sizes and use the corresponding .bsk-navbar-brand-image-{size} class on the same element as .bsk-navbar-brand.

Navbar Variant Relative Image Size Absolute Image Height (Px) Navbar Brand Image Class
Regular Regular 32 .bsk-navbar-brand-image-32
Regular Full height 48 .bsk-navbar-brand-image-48
Large Regular 64 .bsk-navbar-brand-image-64
Large Full height 96 .bsk-navbar-brand-image-96

If you need to use a specific size not in this list you will need to use your own classes to add suitable padding

See the other navbar sizes for other examples.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand bsk-navbar-brand-image-32" href="#">
        <img src="/img/placeholder-32.png">
      </a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>
<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand bsk-navbar-brand-image-48" href="#">
        <img src="/img/placeholder-48.png">
      </a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>

Add the .bsk-fix-navbar-brand-img-txt class to a brand image to combine with brand text.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand bsk-navbar-brand-image-32" href="#">
        <img class="bsk-fix-navbar-brand-img-txt" src="/img/placeholder-32.png">
        Site name
      </a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>

Text

Use the .bsk-navbar-text class to correctly position and colour any text elements.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <p class="bsk-navbar-text">Some text</p>
  </div>
</nav>

Buttons

Add the .bsk-navbar-btn class to correctly position any button elements, unless the button is inside a form element.

Using the .bsk-btn class with an <a> element, within a navigation menu using the .bsk-navbar-nav class, is not supported.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <button class="bsk-btn bsk-btn-default bsk-navbar-btn">Action</button>
  </div>
</nav>

Forms

Add the .bsk-navbar-form class to correctly position any form elements.

The navbar alignment classes can be used to further control form elements.

It is strongly recommended to include visible labels for each form field (the placeholder attribute is not yet universally supported).

Where labels are hidden, the .bsk-sr-only class should always be used to ensure assistive technologies can understand forms. Alternatively, you can use the aria-label, aria-labelledby or title attributes.

Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.

Support for form controls in navbars at small sizes, such as mobile, is limited. It is recommended to use this feature sparingly until support improves.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <form class="bsk-navbar-form bsk-navbar-left" role="search">
      <div class="bsk-form-group">
        <label class="bsk-control-label bsk-sr-only" for="bsk-navbar-form-inputs-example-1">Text input</label>
        <input id="bsk-navbar-form-inputs-example-1" type="search" class="bsk-form-control" placeholder="Search">
      </div>
      <button type="submit" class="bsk-btn bsk-btn-default bsk-navbar-btn">Submit</button>
    </form>
  </div>
</nav>

Drop-down menus can be used as navbar items.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-dropdown">
        <a href="#" class="bsk-dropdown-toggle" data-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>
  </div>
</nav>

Add the .bsk-navbar-link class to correctly colour any link elements that are not part of the navigation menu.

Typically this will be used within elements using the navbar text class.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <p class="bsk-navbar-text">Some text with a <a href="#" class="bsk-navbar-link">link</a></p>
  </div>
</nav>

Sizes

Add one of these classes to alter the size of a navbar:

Navbar Size Navbar Size Class
Large .bsk-navbar-lg 
<nav class="bsk-navbar bsk-navbar-lg">
  <div class="bsk-container-fluid">
    <!-- Site name and toggle get grouped for better mobile display -->
    <div class="bsk-navbar-header">
      <button type="button" class="bsk-navbar-toggle bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-1" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
    <!-- Collect navigation links, forms, and other items for hiding at smaller screen sizes -->
    <div class="bsk-collapse bsk-navbar-collapse" id="bsk-example-navbar-collapse-1">
      <ul class="bsk-nav bsk-navbar-nav">
        <li class="bsk-active"><a href="#">Home <span class="bsk-sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>
        <li class="bsk-dropdown">
          <a href="#" class="bsk-dropdown-toggle" data-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 action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="bsk-divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="bsk-divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="bsk-nav bsk-navbar-nav bsk-navbar-right">
        <li class="bsk-dropdown">
          <a href="#" class="bsk-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Part of British Antarctic Survey <span class="bsk-caret"></span></a>
          <ul class="bsk-dropdown-menu">
            <li><a href="https://www.bas.ac.uk">BAS Home</a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="https://data.bas.ac.uk">Discover BAS data</a></li>
          </ul>
        </li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </div>
  </div>
</nav>
<nav class="bsk-navbar bsk-navbar-lg">
  <div class="bsk-container-fluid">
    <!-- Site name and toggle get grouped for better mobile display -->
    <div class="bsk-navbar-header">
      <button type="button" class="bsk-navbar-toggle bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-1" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
      <a class="bsk-navbar-brand bsk-navbar-brand-image-64" href="#">
        <img src="/img/placeholder-64.png">
      </a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>
<nav class="bsk-navbar bsk-navbar-lg">
  <div class="bsk-container-fluid">
    <!-- Site name and toggle get grouped for better mobile display -->
    <div class="bsk-navbar-header">
      <button type="button" class="bsk-navbar-toggle bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-1" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
      <a class="bsk-navbar-brand bsk-navbar-brand-image-96" href="#">
        <img src="/img/placeholder-96.png">
      </a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Item</a></li>
    </ul>
  </div>
</nav>

States

Active item

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

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

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-active"><a href="#">Active item <span class="bsk-sr-only">(current)</span></a></li>
      <li><a href="#">Another item</a></li>
    </ul>
  </div>
</nav>

This can also be used within drop-down menus.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-active bsk-dropdown">
        <a href="#" class="bsk-dropdown-toggle" data-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 class="bsk-active"><a href="#">Active item <span class="bsk-sr-only">(current)</span></a></li>
          <li><a href="#">Another item</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Layouts

Hidden items

Use the .bsk-navbar-collapse class on an element that will contain navbar items to be hidden behind a menu at small screen sizes.

When the screen size narrows past the small grid size, items in this element will be hidden using the collapse JavaScript plugin. A hidden items menu button is used to show or hide these items in a vertical menu.

This navbar component requires the collapse JavaScript plugin, which is enabled on this site.

This example will only work at small screen sizes.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <!-- Hidden navbar items menu -->
    <div class="bsk-navbar-header">
      <button type="button" class="bsk-navbar-toggle bsk-collapsed" data-toggle="collapse" data-target="#bsk-example-navbar-collapse-4" aria-expanded="false">
        <span class="bsk-sr-only">Toggle navigation</span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
        <span class="bsk-icon-bar"></span>
      </button>
    </div>
    <!-- Collect navigation links, forms, and other items for hiding at smaller screen sizes -->
    <div class="bsk-collapse bsk-navbar-collapse" id="bsk-example-navbar-collapse-4">
      <ul class="bsk-nav bsk-navbar-nav">
        <li><a href="#">Item 0</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>
        <li><a href="#">Item 9</a></li>
      </ul>
    </div>
  </div>
</nav>

Item alignment

Use the .bsk-navbar-left and .bsk-navbar-right classes to position navbar items, including navigation links, drop-down menus, text, buttons etc.

To align navigation links and drop-downs wrap them in a ul element with the relevant alignment class.

Multiple right aligned elements are not currently supported and won’t look right.

<nav class="bsk-navbar">
  <div class="bsk-container-fluid">
    <ul class="bsk-nav bsk-navbar-nav">
      <li><a href="#">Left (Non)-aligned item</a></li>
    </ul>
    <ul class="bsk-nav bsk-navbar-nav bsk-navbar-right">
      <li><a href="#">Right aligned item</a></li>
    </ul>
  </div>
</nav>

Fixed to top

Add the .bsk-navbar-fixed-top class and include a container to fix a navbar to the top of the page.

Additional CSS rules, such as the example below, are needed to prevent the navbar covering up other page content.

body {
  padding-top: 70px;
}
<nav class="bsk-navbar navbar-fixed-top">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-active"><a href="#">Home <span class="bsk-sr-only">(current)</span></a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</nav>

This example would normally use absolute positioning. It is disabled here to avoid breaking the website.

Fixed to bottom item

Add the .bsk-navbar-fixed-bottom class and include a container to fix a navbar to the bottom of the page.

Additional CSS rules, such as the example below, are needed to prevent the navbar covering up other page content.

The Style Kit doesn’t provide styles for this, however the class below can be used as a starting point

body {
  padding-bottom: 70px;
}
<nav class="bsk-navbar navbar-fixed-bottom">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-active"><a href="#">Home <span class="bsk-sr-only">(current)</span></a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</nav>

This example would normally use absolute positioning. It is disabled here to avoid breaking the website.

Static top

Add the .bsk-navbar-static-top class and include a container to create a full-width navbar that scrolls with the page.

Unlike the .bsk-navbar-fixed-* classes, you do not need to change any padding on the body.

<nav class="bsk-navbar navbar-static-top">
  <div class="bsk-container-fluid">
    <div class="bsk-navbar-header">
      <a class="bsk-navbar-brand" href="#">Site Name</a>
    </div>
    <ul class="bsk-nav bsk-navbar-nav">
      <li class="bsk-active"><a href="#">Home <span class="bsk-sr-only">(current)</span></a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</nav>