Dropdown

Overview

The Dropdown component is designed to manage dropdown functionality, allowing users to toggle visibility of additional content in an organized way. Additionally, the Dropdown component exports two other sub-components: Activator and Body .

Usage

// importing component
import { Dropdown, Activator, Body } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/dropdown.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/dropdown.css")

Sub-components

Activator

The Activator is nested within the Dropdown component as a child element. It is designed to contain an interactive element, such as a button or clickable area, that triggers the expansion or collapse of the dropdown's content.

Body

The Body is placed as the second child within the Dropdown component. It serves as the container for the main content of the dropdown, allowing you to insert any elements that should be displayed when the dropdown is expanded.

Live Demo

// code used for above example
import { Dropdown, Activator, Body } from "@unbxd-ui/react-search-components";
 
<Dropdown selected={false}>
	<Activator>
		<div>Furniture</div>
	</Activator>
	
	<Body>
		<ul>
			<li>Table</li>
			<li>Chairs</li>
			<li>Dining</li>
			<li>Bedroom</li>
		</ul>
	</Body>
</Dropdown>

Props

selected

optional

boolean

The selected prop is a boolean that indicates whether any option in the dropdown is currently selected. If an option is selected, the dropdown receives the dd-selected class, allowing it to visually represent the selected state.

styles

optional

object

This prop will be used to style the component. The value must use a defined structure (the structure can be seen in the following example). The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	wrapper: "",
	header: "",
	body: ""
}}

Related Components

Accordion

Accordion useQuery