New This website is new, your feedback will help us to improve it.

Navbar

Overview

Most of the samples on this page do not look good on small screen beacuse of the way they are displayed in the code example blocks

Used to create navigation bars used for primary, horizontal, navigation. 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 example may look odd here due to it being in a container in this page.

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="flex justify-between container mx-auto px-6 fhd:px-16">
      <!-- LEFT -->
      <div class="sm:block lg:flex space-x-2 items-center">
          <!-- Brand -->
          <a href="/" class="block py-6 md:py-5 text:xl md:text-2xl">Site Name</a>
          <!-- Desktop nav items -->
          <div class="hidden lg:flex px-4">
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex lg:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none">
              <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
          <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-18 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
          </div>
      </div>
  </div>
</nav>

Usage

This example may look odd here due to it being in a container in this page.

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 the British Antarctic Survey'.

The navigation launcher must contain links to:

Other links may be added after these required items.

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex flex-1 space-x-2 items-center">
              <!-- Brand -->
              <a href="/" class="block py-6 md:py-5 text:xl md:text-2xl">Site Name</a>
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4">
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
          <!-- RIGHT (desktop) -->
          <div data-dropdown-wrapper class="hidden lg:flex items-center">
              <div class="relative menu-wrapper ml-4">
                  <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                      Part of the British Antarctic Survey
                      <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                  </button>
                  <div data-dropdown-menu class="hidden absolute right-0 mt-3 rounded-b-lg z-20 px-2 pb-1 bsk-bg-blue shadow-lg">                   
                      <a href="https://www.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>                        
                      <a href="https://data.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                  </div>
              </div>
          </div>        
          <!-- MOBILE MENU -->
          <div class="flex lg:hidden">
              <!-- Mobile toggle -->
              <button class="mobile-toggle focus:outline-none">
                  <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                  </svg>
                  <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
              </button>
              <!-- Mobile menu dropdown -->
              <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-18 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
                  <div data-dropdown-wrapper>
                      <button data-dropdown-toggle class="flex items-center focus:outline-none hover:underline px-3 py-1 w-full h-8 rounded hover:bsk-bg-blue-hover">
                          Part of the British Antarctic Survey
                          <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                      </button>
                      <div data-dropdown-menu class="hidden space-y-1 mt-2">
                          <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>
                          <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>
                      </div>
                  </div>                
                  <hr>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
      </div>
  </div>
</nav>

Components

Item

Use a list of <a> elements within a navigation menu.

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="flex justify-between container mx-auto px-6 fhd:px-16">
      <!-- LEFT -->
      <div class="flex space-x-2 items-center">
          <!-- Desktop nav items -->
          <div class="flex px-4">
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
          </div>
      </div>
  </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="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <!-- MOBILE MENU -->
      <div class="flex justify-start">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none">
              <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>                
          </button>
          <!-- Mobile menu dropdown -->
          <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-12 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
          </div>
      </div>    
  </div>
</nav>

Brand image

To look right, scale the logo or image so that the width results in a menu of a suitable height. Make sure to use a suitable resolution for the image.

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex space-x-2 items-center">
              <!-- Brand -->
              <a href="/"><img class="bsk-brand-logo py-6 hidden lg:block" src="https://style-kit.web.bas.ac.uk/0.7.4/images/bas-logo/bas-logo-23.png"></a>
              <a href="/" class="block lg:hidden py-6 md:py-5 text:xl md:text-2xl">Site Name</a>
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4">
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
          <!-- RIGHT (desktop) -->
          <div data-dropdown-wrapper class="hidden lg:flex items-center">
              <div class="relative menu-wrapper ml-4">
                  <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                      Part of the British Antarctic Survey
                      <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                  </button>
                  <div data-dropdown-menu class="hidden absolute right-0 mt-3 rounded-b-lg z-20 px-2 pb-1 bsk-bg-blue shadow-lg">                   
                      <a href="https://www.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>                        
                      <a href="https://data.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                  </div>
              </div>
          </div>  
          <!-- MOBILE MENU -->
          <div class="flex lg:hidden">
              <!-- Mobile toggle -->
              <button class="mobile-toggle focus:outline-none">
                  <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                  </svg>
                  <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
              </button>
              <!-- Mobile menu dropdown -->
              <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-18 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
                  <div data-dropdown-wrapper>
                      <button data-dropdown-toggle class="flex items-center focus:outline-none hover:underline px-3 py-1 w-full h-8 rounded hover:bsk-bg-blue-hover">
                          Part of the British Antarctic Survey
                          <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                      </button>
                      <div data-dropdown-menu class="hidden space-y-1 mt-2">
                          <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>
                          <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>
                      </div>
                  </div>                
                  <hr>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
      </div>
  </div>
</nav>

Text

Some variations on text in a navbar - <a>, <p>, <span> and plain.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex flex-1 space-x-2 items-center">
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4 items-center">
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Some a text</a>
                  <p class="px-3 py-2 m-0!">Some p text</p>
                  <span class="px-3 py-2">Some span text</span>
                  Some plain text
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex lg:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none">
              <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
          <!-- Mobile menu dropdown -->
          <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-12 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Some a text</a>
              <p class="px-3 py-2 m-0!">Some p text</p>
              <span class="px-3 py-2">Some span text</span>
          </div>
      </div>
  </div>
</nav>

Buttons

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="container mx-auto py-4 px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex flex-1 space-x-2 items-center">
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4 items-center">
                  <a href="#" class="bsk-btn bsk-btn-default mr-2" role="button">Action</a>
                  <button class="bsk-btn bsk-btn-primary mr-2 outline-1">Action</button>
                  <button class="bsk-btn bsk-btn-success">Action</button>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex lg:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none">
              <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
          <!-- Mobile menu dropdown -->
          <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-12 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
                  <a href="#" class="bsk-btn bsk-btn-default mr-2 text-center w-60" role="button">Action</a>
                  <button class="bsk-btn bsk-btn-primary mr-2 w-60 outline-1">Action</button>
                  <button class="bsk-btn bsk-btn-success w-60">Action</button>
          </div>
      </div>
  </div>
</nav>

Forms

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="container mx-auto py-4 px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex flex-1 space-x-2 items-center">
              <!-- Desktop nav items -->
              <div class="hidden lg:flex">
                  <form class="flex items-center bg-slate-50 text-gray-800 rounded-full">
                      <input type="text" class="w-full mx-2 px-1 focus:outline-none" id="navbar-form-search">
                      <button type="submit" class="bsk-btn bsk-btn-secondary">Search</button>
                  </form>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex lg:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none">
              <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
              </svg>
              <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
          </button>
          <!-- Mobile menu dropdown -->
          <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-12 pt-2 pb-3 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
              <form class="flex items-center bg-slate-50 text-gray-800 rounded-full w-100">
                  <input type="text" class="w-full mx-2 px-1 focus:outline-none" id="navbar-form-search">
                  <button type="submit" class="bsk-btn bsk-btn-secondary">Search</button>
              </form>
          </div>
      </div>    
  </div>
</nav>

Drop-down menus can be used as navbar items.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex flex-1 space-x-2 items-center">
              <!-- Desktop nav items -->
              <div class="flex px-4 items-center">
                  <div data-dropdown-wrapper>
                      <button data-dropdown-toggle class="inline-flex items-center px-2 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                          Dropdown
                          <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                      </button>
                      <div data-dropdown-menu class="hidden absolute rounded-b-lg z-50 px-2 pb-1 bsk-bg-blue shadow-lg mt-4 w-60">
                          <div class="py-1" role="menu">
                              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</nav>
<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex md:justify-between">
          <!-- LEFT -->
          <div class="flex flex-1 space-x-2 items-center">
              <!-- Desktop nav items -->
              <div class="flex px-4 items-center">
                  <p class="!mb-0">Some text with a <a href="#">link</a></p>
              </div>
          </div>
      </div>
  </div>
</nav>

Sizes

Add the xlmenu:text-2xl class to a parent element for larger menu text on large screens. Use text-xl or text-2xl for larger menu text on all screen sizes.

<nav class="text-neutral-50 bsk-bg-blue">
  <div class="container mx-auto px-6 fhd:px-16 xlmenu:text-2xl">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="sm:block lg:flex space-x-2 items-center">
              <!-- Brand -->
              <a href="/"><img class="bsk-brand-logo py-6 hidden xl:block" src="https://style-kit.web.bas.ac.uk/0.7.4/images/bas-logo/bas-logo-23.png"></a>
              <a href="/" class="block xl:hidden py-6 md:py-5 text:xl md:text-2xl">Site Name</a>
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4">
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
          <!-- RIGHT (desktop) -->
          <div data-dropdown-wrapper class="hidden lg:flex items-center">
              <div class="relative menu-wrapper ml-4">
                  <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                      Part of the British Antarctic Survey
                      <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                  </button>
                  <div data-dropdown-menu class="hidden absolute right-0 mt-3 rounded-b-lg z-20 px-2 pb-1 bsk-bg-blue shadow-lg">                   
                      <a href="https://www.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>                        
                      <a href="https://data.bas.ac.uk" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                  </div>
              </div>
          </div>  
          <!-- MOBILE MENU -->
          <div class="flex lg:hidden">
              <!-- Mobile toggle -->
              <button class="mobile-toggle focus:outline-none">
                  <svg class="icon-open w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                  </svg>
                  <svg class="icon-close w-8 h-8 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
              </button>
              <!-- Mobile menu dropdown -->
              <div id="main-menu" role="menu" class="menu-dropdown z-20 hidden absolute flex flex-col left-0 right-0 mt-18 pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue border-t-1 border-t-slate-950">
                  <div data-dropdown-wrapper>
                      <button data-dropdown-toggle class="flex items-center focus:outline-none hover:underline px-3 py-1 w-full h-8 rounded hover:bsk-bg-blue-hover">
                          Part of the British Antarctic Survey
                          <svg class="arrow transform transition-transform w-5 h-5 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                          </svg>
                      </button>
                      <div data-dropdown-menu class="hidden space-y-1 mt-2">
                          <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>
                          <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>
                      </div>
                  </div>                
                  <hr>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
      </div>
  </div>
</nav>

States

Active item

Add the active directive to show that an item is active.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="flex space-x-2">
              <div class="flex px-4 items-center">
                  <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
                  <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover active">Item2 (active)</a>
                  <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
              </div>
          </div>
      </div>
  </div>
</nav>

Disabled item

Add the bsk-disabled class to show that an item is disabled.

This only creates the visual appearance of the element being unavailable. Be sure to properly protect resources with authentication and security methods when using this.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex justify-between">
          <!-- LEFT -->
          <div class="flex space-x-2">
            <div class="flex px-4 items-center">
                  <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
                  <a class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover bsk-disabled">Item2 (disabled)</a>
                  <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
              </div>
          </div>
      </div>
  </div>
</nav>

Layouts

Item alignment

This example does not work well on small screens.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="flex md:justify-between">
          <!-- LEFT -->
          <div class="flex items-center">
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Left aligned item 1</a>
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Left aligned item 2</a>
          </div>
          <!-- RIGHT -->
          <div class="flex items-center">
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Right aligned item 1</a>
              <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Right aligned item 2</a>
          </div>
      </div>
  </div>
</nav>

Fixed to top

Add the classes fixed left-0 top-0 w-full to the top nav element to fix the navbar to the top of the screen.

Fixed to bottom

Add the classes fixed left-0 bottom-0 w-full to the top nav element to fix the navbar to the bottom of the screen.

Sticky top

Add the classes sticky and top-<n> to the top nav element to position the navbar as relative untill a certain scroll down value is reached. Then treat it as fixed so it remains at the top of the page.