Dropdowns

You can implement a select dropdown using the Dropdown component. Here's a simple example:

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit">

<Dropdown.Item>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

The title prop serves as the placeholder, while Dropdown.Item contains the items for the dropdown.

You can customize how the dropdown opens. For instance, you might want it to activate on hover by utilizing the trigger prop:

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit" trigger="hover">

<Dropdown.Item>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

A context menu can also be created by setting the trigger to 'contextMenu':

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit" trigger="contextMenu">

<Dropdown.Item>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

By default, the trigger is set to 'click'. You can also assign keys to each item and specify a default key using the activeKey prop. Here's how:

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit" activeKey="a">

<Dropdown.Item eventKey="a">Apple</Dropdown.Item>

<Dropdown.Item eventKey="b">Orange</Dropdown.Item>

<Dropdown.Item eventKey="c">Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

Setting activeKey to 'a' marks that item as the active selection. Each item can have its own eventKey, and when they match, the item will be highlighted.

To disable an item, simply add the disabled prop:

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit">

<Dropdown.Item disabled>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

You can adjust the size of the dropdown button using the size prop:

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit" size="lg">

<Dropdown.Item disabled>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

The size options include lg for large, xs for extra small, sm for small, and md for medium.

If you want to remove the caret from the dropdown button, use the noCaret prop:

import React from "react";

import { Dropdown } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit" noCaret>

<Dropdown.Item disabled>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

Furthermore, you can enhance the button by adding an icon using the icon prop:

import React from "react";

import { Dropdown, Icon } from "rsuite";

import "rsuite/dist/styles/rsuite-default.css";

export default function App() {

return (

<div className="App">

<Dropdown title="Fruit" icon={<Icon icon="file" />}>

<Dropdown.Item disabled>Apple</Dropdown.Item>

<Dropdown.Item>Orange</Dropdown.Item>

<Dropdown.Item>Grape</Dropdown.Item>

</Dropdown>

</div>

);

}

Conclusion

With React Suite, you can effortlessly incorporate dropdown menus into your React applications for a more interactive user experience.