Rens UI

Classes Information

ClassName	Description
dropdown-container	Dropdown container base class
dropdown	Dropdown base class
dropdown-menu	Dropdown menu base class
dropdown-hover	Will open the dropdown on hover
dropdown-open	Will open the dropdown on load
dropdown-item	Will style a element as dropdown item
dropdown-active	Will style a element as active
dropdown-divider	Will apply a border separator
dropdown-item-no-animation	Will disable the animation on click
dropdown-item-no-animation	Will disable the animation on click
dropdown-menu-bottom-right	Will position to the bottom right
dropdown-menu-bottom-left	Will position to the bottom left
dropdown-menu-top-right	Will position to the top right
dropdown-menu-top-left	Will position to the top left
dropdown-menu-left-bottom	Will position to the left bottom
dropdown-menu-left-top	Will position to the left top
dropdown-menu-right-bottom	Will position to the right bottom
dropdown-menu-right-top	Will position to the right top
dropdown-menu-left	Will position to the left
dropdown-menu-right	Will position to the right
dropdown-menu-bottom-center	Will position to the bottom center
dropdown-menu-top-center	Will position to the top center

Add `tabIndex=-1` on item for close the dropdown when click Me on item.

Basic Usage

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="1">Click Me</label>
  <div class="dropdown-menu">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Top

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Top Left</label>
  <div class="dropdown-menu dropdown-menu-top-left">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>
<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Top Center</label>
  <div class="dropdown-menu dropdown-menu-top-center">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>
<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Top Right</label>
  <div class="dropdown-menu dropdown-menu-top-right">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Left

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">left Top</label>
  <div class="dropdown-menu dropdown-menu-left-top">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>
<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Left Center</label>
  <div class="dropdown-menu dropdown-menu-left">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>
<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Left Bottom</label>
  <div class="dropdown-menu dropdown-menu-left-bottom">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Right

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Right Top</label>
  <div class="dropdown-menu dropdown-menu-right-top"> 
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>
<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Right Center</label>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>
<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Right Bottom</label>
  <div class="dropdown-menu dropdown-menu-right-bottom">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Bottom

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Bottom Left</label>
  <div class="dropdown-menu dropdown-menu-bottom-left">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Bottom Center</label>
  <div class="dropdown-menu dropdown-menu-bottom-center">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Buttom Right</label>
  <div class="dropdown-menu dropdown-menu-bottom-right">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Open

Example Code

html

<div class="dropdown dropdown-open">
  <label class="btn btn-primary my-2" tabindex="0">Click Me</label>
  <div class="dropdown-menu dropdown-menu-bottom-right shadow-lg">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>

  </div>
</div>

Hover

Example Code

html

<div class="dropdown dropdown-hover">
  <label class="btn btn-primary my-2" tabindex="0">Click Me</label>
  <div class="dropdown-menu dropdown-menu-bottom-right">
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Divider

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Click Me</label>
  <div class="dropdown-menu dropdown-menu-bottom-right gap-1">
    <a class="dropdown-item text-sm">Profile</a>
    <div class="dropdown-divider" role="separator"></div>
    <a tabindex="-1" class="dropdown-item text-sm">Settings</a>
    <a tabindex="-1" class="dropdown-item text-sm">Logout</a>

  </div>
</div>

Bordered

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Click Me</label>
  <div
    class="dropdown-menu dropdown-menu-bottom-right border border-gray-border"
  >
    <a class="dropdown-item text-sm">Item 1</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
    <a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
  </div>
</div>

Active Item

Example Code

html

<div class="dropdown">
  <label class="btn btn-primary my-2" tabindex="0">Click Me</label>
  <div class="dropdown-menu dropdown-menu-bottom-right gap-1">
    <a class="dropdown-item text-sm">Profile</a>
    <a tabindex="-1" class="dropdown-item text-sm">Settings</a>
    <a tabindex="-1" class="dropdown-item text-sm dropdown-active">Logout</a> 
  </div>
</div>

Getting Started

Elements

Forms

Navigations

Miscellaneous

Classes Information

Basic Usage

Example Code

Top

Example Code

Left

Example Code

Right

Example Code

Bottom

Example Code

Open

Example Code

Hover

Example Code

Divider

Example Code

Bordered

Example Code

Active Item

Example Code

Table Of Contents

Getting Started

Elements

Forms

Navigations

Miscellaneous

Dropdown

Table Of Contents