<< Go back

Navbar - dropdown item


Standard


<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <div data-dropdown-wrapper>
      <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
        Dropdown item
        <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 z-50 px-2 pb-1 bsk-bg-blue shadow-lg">
        <div class="py-1" role="menu">
          <a href="#" class="block text-sm px-3 py-2 rounded hover:bsk-bg-blue-hover">Dropdown item 1</a>
          <a href="#" class="block text-sm px-3 py-2 rounded hover:bsk-bg-blue-hover">Dropdown item 2</a>
        </div>
      </div>
    </div>
  </div>
</nav>


With item

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <a href="#" class="px-3 py-2 mx-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
    <div data-dropdown-wrapper class="translate-y-[-1px]">
      <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
        Dropdown item
        <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 z-50 px-2 pb-1 bsk-bg-blue shadow-lg">
        <div class="py-1" role="menu">
          <a href="#" class="block text-sm px-3 py-2 rounded hover:bsk-bg-blue-hover">Dropdown item 1</a>
          <a href="#" class="block text-sm px-3 py-2 rounded hover:bsk-bg-blue-hover">Dropdown item 2</a>
        </div>
      </div>
    </div>
  </div>
</nav>


With brand text

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <a href="#" class="px-3 py-2 mx-2">BAS Style Kit Testbed</a>
    <div data-dropdown-wrapper class="translate-y-[-1px]">
      <button data-dropdown-toggle class="inline-flex items-center px-3 py-2 rounded hover:underline hover:bsk-bg-blue-hover">
        Dropdown item
        <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 z-50 px-2 pb-1 bsk-bg-blue shadow-lg">
        <div class="py-1" role="menu">
          <a href="#" class="block text-sm px-3 py-2 rounded hover:bsk-bg-blue-hover">Dropdown item 1</a>
          <a href="#" class="block text-sm px-3 py-2 rounded hover:bsk-bg-blue-hover">Dropdown item 2</a>
        </div>
      </div>
    </div>
  </div>
</nav>