Dropdown#

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" tabindex="0">Options</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>

Bottom left and right#

Dropdowns can have different positions.

HTML

JSX

<div class="dropdown">
	<label class="btn" tabindex="0">Options</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>

<div class="dropdown">
	<label class="btn" tabindex="0">Options</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" tabindex="0">Options</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" tabindex="0">Options</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" tabindex="0">Options</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" tabindex="0">Options</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 bottom and top#

Dropdown in left bottom and top.

HTML

JSX

<div class="dropdown">
	<label class="btn" tabindex="0">Options</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" tabindex="0">Options</label>
	<div class="dropdown-menu dropdown-menu-left-top">
		<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>

Right bottom and top#

Dropdown in right bottom and top.

HTML

JSX

<div class="dropdown">
	<label class="btn" tabindex="0">Options</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>

<div class="dropdown">
	<label class="btn" tabindex="0">Options</label>
	<div class="dropdown-menu dropdown-menu-right-top">
		<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" tabindex="0">Options</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>

Hover#

Dropdown on hover.

HTML

JSX

<div class="dropdown dropdown-hover">
	<label class="btn" tabindex="0">Options</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" tabindex="0">Options</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" tabindex="0">Options</label>
	<div class="dropdown-menu dropdown-menu-bottom-right border border-gray-500">
		<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" tabindex="0">Options</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-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

Divider Input

Edit this page on GitHub