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

Dropdown#

Default#

Bottom left and right#

Top left and right#

Left and right#

Left bottom and top#

Right bottom and top#

Opened#

Hover#

Divider#

Bordered#

With active item#

API#

`Dropdown Classes`

Dropdown

Default

Bottom left and right

Top left and right

Left and right

Left bottom and top

Right bottom and top

Opened

Hover

Divider

Bordered

With active item

API