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

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Brand -->
              <a href="#" class="px-3 py-2"><b>Site Name</b></a>
              <!-- 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">Home</a>
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
      </div>
              <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <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

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.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Brand -->
              <a href="#" class="px-3 py-2"><b>Site Name</b></a>
              <!-- 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">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 xlmenu: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 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 rounded-b-lg z-50 mt-4 px-2 pb-1 bsk-bg-blue shadow-lg translate-x-27">                        
                      <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>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <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>

Components

Item

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

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- 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">Item</a>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu: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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item</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">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="hidden space-x-2">
              <!-- 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">Item</a>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end">
          <!-- 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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <a href="#" class="block px-3 py-2 rounded hover:bsk-bg-blue-hover">Item</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 py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Brand -->
              <a href="#"><img class="hidden lg:block w-60" src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/bas-logo/bas-logo-23.png"></a>
              <!-- 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">Home</a>
                  <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
      </div>
              <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <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>

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="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- 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 justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <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>

Buttons

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- 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">Action</button>
                  <button class="bsk-btn bsk-btn-success">Action</button>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <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>

Forms

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- 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>
  </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="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Desktop nav items -->
              <div class="hidden lg: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 translate-y-3">
                          <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="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <div class="hidden lg:flex px-4 items-center">
                  <p>Some text with a <a href="#">link</a></p>
              </div>
          </div>
      </div>
  </div>
</nav>

Sizes

Add the text-xl class to all text elements in the navbar to create a larger navbar.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Brand -->
              <a href="#" class="text-xl px-3 py-2"><b>Site Name</b></a>
              <!-- Desktop nav items -->
              <div class="hidden lg:flex px-4 items-center">
                  <a href="#" class="text-xl px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
                  <a href="#" class="text-xl px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
              </div>
          </div>
          <!-- RIGHT (desktop) -->
          <div data-dropdown-wrapper class="hidden xlmenu:flex items-center">
              <div class="relative menu-wrapper ml-4">
                  <button data-dropdown-toggle class="inline-flex text-xl items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
                      Part of 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 rounded-b-lg z-50 mt-4 px-2 pb-1 bsk-bg-blue shadow-lg translate-x-36">                        
                      <a href="https://www.bas.ac.uk" class="block text-xl px-3 py-2 rounded hover:bsk-bg-blue-hover">BAS Home</a>                        
                      <a href="https://data.bas.ac.uk" class="block text-xl px-3 py-2 rounded hover:bsk-bg-blue-hover">Discover BAS Data</a>                            
                  </div>
              </div>
          </div>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end xlmenu:hidden">
          <!-- Mobile toggle -->
          <button class="mobile-toggle focus:outline-none -translate-y-1">
              <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-10 hidden absolute translate-y-10 translate-x-8 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <a href="#" class="block text-xl px-3 py-2 rounded hover:bsk-bg-blue-hover">Home</a>
              <a href="#" class="block text-xl px-3 py-2 rounded hover:bsk-bg-blue-hover">About</a>
          </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="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <div class="hidden lg: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="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <div class="hidden lg: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

Hidden items

Typically used for menus on small screens. These menus would usually remain hidden until the viewport becomes less wide than the width breakpoints.

To work as an example, the navbar here has different visibility classes to what would normally be used to create a fully functioning responsive navbar.

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container mx-auto px-6 fhd:px-16">
      <div class="sm:block md:flex md:justify-between">
          <!-- LEFT -->
          <div class="sm:block xlmenu:flex space-x-2">
              <!-- Brand -->
              <a href="#" class="hidden px-3 py-2"><b>Site Name</b></a>
              <!-- Desktop nav items -->
              <div class="hidden px-4 items-center">
                  <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>
      </div>
      <!-- MOBILE MENU -->
      <div class="flex justify-end">
          <!-- 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-10 hidden absolute translate-y-10 mt-2 flex flex-col w-max pt-2 pb-4 px-3 space-y-2 rounded-b-lg shadow-lg bsk-bg-blue">
              <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>

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="sm:block md: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.