Dropdown RippleUI | TailwindCSS Components

Ripple UI comes with a dropdown component that can be used to display a list of options.

If you want to prevent to close the dropdown when click on item add tabIndex=-1

Default

Simple example of a dropdown.

HTML

JSX

<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Center bottom and top

Dropdowns can be at the center, bottom and top.

HTML

JSX

<div class="dropdown-container justify-center">
	<div class="dropdown">
		<label class="btn my-2" tabindex="0">Click</label>
		<div class="dropdown-menu dropdown-menu-bottom-center">
			<a class="dropdown-item text-sm">Profile</a>
			<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
			<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
		</div>
	</div>
</div>

<div class="dropdown-container justify-center">
	<div class="dropdown">
		<label class="btn my-2" tabindex="0">Click</label>
		<div class="dropdown-menu dropdown-menu-top-center">
			<a class="dropdown-item text-sm">Profile</a>
			<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
			<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
		</div>
	</div>
</div>

Bottom left and right

Dropdowns can be positioned at the bottom left and right.

HTML

JSX

<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-bottom-left">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>
<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-bottom-right">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Top left and right

Dropdown in top left and right.

HTML

JSX

<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-top-left">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>
<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-top-right">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Left and right

Dropdown in left and right.

HTML

JSX

<div class="dropdown">
	<label class="btn mx-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-left">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

<div class="dropdown">
	<label class="btn mx-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-right">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Left and right at top

Dropdown in left and right at top.

HTML

JSX

<div class="dropdown">
	<label class="btn mx-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-left-bottom">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

<div class="dropdown">
	<label class="btn mx-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-right-bottom">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Left and right at bottom

Dropdown in left and right at bottom.

HTML

JSX

<div class="dropdown">
	<label class="btn mx-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-left-bottom">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>
<div class="dropdown">
	<label class="btn mx-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-right-bottom">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Opened

Dropdown opened.

HTML

JSX

<div class="dropdown dropdown-open">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-bottom-right shadow-lg">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Hover

Dropdown on hover.

HTML

JSX

<div class="dropdown dropdown-hover">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-bottom-right">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Divider

Dropdown with divider.

HTML

JSX

<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</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">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

Bordered

Dropdown with border.

HTML

JSX

<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</label>
	<div class="dropdown-menu dropdown-menu-bottom-right border border-gray-10">
		<a class="dropdown-item text-sm">Profile</a>
		<a tabindex="-1" class="dropdown-item text-sm">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm">Subscriptions</a>
	</div>
</div>

With active item

Dropdown with active item.

HTML

JSX

<div class="dropdown">
	<label class="btn my-2" tabindex="0">Click</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">Account settings</a>
		<a tabindex="-1" class="dropdown-item text-sm dropdown-active">Subscriptions</a>
	</div>
</div>

API

`Dropdown Classes`

class	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

Divider Forms

Edit this page on GitHub

Dropdown

​Default

​Center bottom and top

​Bottom left and right

​Top left and right

​Left and right

​Left and right at top

​Left and right at bottom

​Opened

​Hover

​Divider

​Bordered

​With active item

​API

`Dropdown Classes`

Default

Center bottom and top

Bottom left and right

Top left and right

Left and right

Left and right at top

Left and right at bottom

Opened

Hover

Divider

Bordered

With active item

API