Dropdowns

Demo

Demo

Usage

<Dropdown
  content={
    <div className="dropdown-menu">
      <a href="#no-link">Dropdown Action</a>
      <a href="#no-link">Link</a>
      <hr />
      <h6 className="uppercase">Header</h6>
      <a href="#no-link">Something Else</a>
    </div>
  }
>
  <Button className="uppercase">
    Dropdown
    <span className="ltr:ml-3 rtl:mr-3 la la-caret-down text-xl leading-none"></span>
  </Button>
</Dropdown>

or

<div className="btn-group">
  <Button className="uppercase">Split Dropdown</Button>
  <Dropdown
    content={
      <div className="dropdown-menu">
        <a href="#no-link">Dropdown Action</a>
        <a href="#no-link">Link</a>
        <hr />
        <h6 className="uppercase">Header</h6>
        <a href="#no-link">Something Else</a>
      </div>
    }
  >
    <Button className="uppercase ltr:pl-4 rtl:pr-4">
      <span className="la la-caret-down text-xl leading-none"></span>
    </Button>
  </Dropdown>
</div>

Props

This comopoent supports all the props of Tippy.js.

Property	Type	Default	Required	Description
content	object		no	Content of the dropdown