React Pretty Dropdown

Customizable dropdown menu for React.

Screenshot

Installation

npm install react-pretty-dropdown

Usage

Import the component and set menu items using anchor tags, Link from react-router-dom, or buttons. It doesn't matter the element you use because they'll have the same style.

import Dropdown from 'react-pretty-dropdown';

<Dropdown icon="ellipsis-vertical">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</Dropdown>

Props

background - Background color. textColor - Text color. fontSize - Font size. hoverBackground - Background color on hover. hoverFontColor - Font color on hover. activeBackground - Background color of active items. activeFontColor - Font color of active items. icon - Menu button icon. Available options: "ellipsis-vertical", "ellipsis", "bars", and "caret-down". iconSize - Menu icon size. buttonWidth - Menu button width. buttonBorderOnHover - Menu button border on hover. Example: "1px solid #0054a8". buttonBorderOnFocus - Menu button border on focus. Example: "1px solid #0054a8". buttonFloat - Only used to align the menu button to the right. Set it to "float-end". menuPosition - Menu horizontal position. The default value is "35px", which leaves no gap between the menu button and items. width - Width of the whole component.

<Dropdown
icon="ellipsis-vertical"
background="lightblue"
textColor="black"
fontSize="1.5rem"
iconSize="1.7rem"
hoverBackground="green"
hoverFontColor="white"
activeBackground="green"
activeFontColor="white"
width="200px"
buttonFloat="float-end"
>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</Dropdown>