SaasRock Logo

Dropdown

Dropdown - Simple

<Dropdown
  onClick={() => alert("Dropdown click")}
  button={<div>Dropdown</div>}
  options={
    <div>
      <button
        type="button"
        className="w-full text-left text-gray-700 block px-4 py-2 text-sm hover:bg-gray-50 focus:outline-none"
        tabIndex={-1}
        onClick={() => alert("Clicked")}
      >
        <div>Button</div>
      </button>
      <Link to={currentRoute} className="w-full text-left text-gray-700 block px-4 py-2 text-sm hover:bg-gray-50 focus:outline-none" tabIndex={-1}>
        <div>Link</div>
      </Link>
    </div>
  }
></Dropdown>

Dropdown - with Click

<DropdownWithClick
  onClick={() => alert("Dropdown click")}
  button={<div>Dropdown with Click</div>}
  options={
    <div>
      <button
        type="button"
        className="w-full text-left text-gray-700 block px-4 py-2 text-sm hover:bg-gray-50 focus:outline-none"
        tabIndex={-1}
        onClick={() => alert("Clicked")}
      >
        <div>Button</div>
      </button>
      <Link to={currentRoute} className="w-full text-left text-gray-700 block px-4 py-2 text-sm hover:bg-gray-50 focus:outline-none" tabIndex={-1}>
        <div>Link</div>
      </Link>
    </div>
  }
/>