<< Go back

Navbar - forms submit button



Standard

<nav class="text-neutral-50 bsk-bg-blue py-4">
  <div class="container flex px-8">
    <form>
      <label for="name">Enter your name:</label>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Jane Smith"
        required
        class="outline-1 rounded-sm pl-1 bg-slate-50 text-bsk-blue"
      />
      <button
        type="submit"
        class="bsk-btn bsk-btn-light mx-2 hover:outline-2"
      >
        Submit
      </button>
    </form>
  </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>
    <form class="translate-y-[-1px]">
      <label for="name">Enter your name:</label>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Jane Smith"
        required
        class="outline-1 rounded-sm pl-1 bg-slate-50 text-bsk-blue"
      />
      <button
        type="submit"
        class="bsk-btn bsk-btn-light mx-2 hover:outline-2"
      >
        Submit
      </button>
    </form>
  </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>
    <form class="translate-y-[-1px]">
      <label for="name">Enter your name:</label>
      <input
        id="name"
        name="name"
        type="text"
        placeholder="Jane Smith"
        required
        class="outline-1 rounded-sm pl-1 bg-slate-50 text-bsk-blue"
      />
      <button
        type="submit"
        class="bsk-btn bsk-btn-light mx-2 hover:outline-2"
      >
        Submit
      </button>

    </form>
  </div>
</nav>