Dropdown

A toggleable menu that allows the user to choose one value from a predefined list.

Usage

import { Dropdown, Button } from '@blendx-ui';

// Basic usage
<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

// Split button dropdown
<Dropdown as={ButtonGroup}>
  <Button variant="success">Split Button</Button>

  <Dropdown.Toggle split variant="success" id="dropdown-split-basic" />

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Props

Dropdown Props

Prop	Type	Required	Default	Description
id	string	No	-	Unique identifier
drop	string	No	'down'	Direction dropdown opens ('up', 'down', 'left', 'right')
show	boolean	No	-	Controls dropdown visibility
align	string/object	No	-	Aligns the dropdown menu ('start', 'end', or responsive object)
flip	boolean	No	true	Allow Dropdown to flip in case of overflow
onToggle	function	No	-	Callback fired when dropdown visibility changes
onSelect	function	No	-	Callback fired when a menu item is selected
focusFirstItemOnShow	boolean/string	No	true	Focus first item automatically when opened
as	elementType	No	'div'	Component to render the dropdown as
navbar	boolean	No	false	Indicate dropdown is within a navbar
autoClose	boolean/string	No	true	Auto-close behavior ('true', 'false', 'inside', 'outside')

Dropdown.Toggle Props

Prop	Type	Required	Default	Description
id	string	Yes	-	Identifies the associated dropdown menu
split	boolean	No	false	Render as a split button
childBsPrefix	string	No	-	Change underlying component CSS base class name
variant	string	No	'primary'	Component visual or contextual style variants
size	string	No	-	Component size ('sm', 'lg')
disabled	boolean	No	false	Whether the toggle is disabled

Dropdown.Menu Props

Prop	Type	Required	Default	Description
align	string/object	No	-	Aligns the dropdown menu ('start', 'end', or responsive object)
flip	boolean	No	true	Allow menu to flip in case of overflow
show	boolean	No	-	Controls visibility
renderOnMount	boolean	No	false	Render menu even when not visible
popperConfig	object	No	-	Passed to ReactPopper's Popper component
rootCloseEvent	string	No	'click'	Which open event to listen for when determining "click outside"

Dropdown.Item Props

Prop	Type	Required	Default	Description
active	boolean	No	false	Whether item is active
disabled	boolean	No	false	Whether item is disabled
eventKey	string	No	-	Value passed to the onSelect handler
href	string	No	-	HTML href attribute
onClick	function	No	-	Click handler
as	elementType	No	'a'	Component to render the item as

Parameters

onToggle

• Parameters: (isOpen: boolean, event: SyntheticEvent, metadata: { source: 'click' | 'keydown' | 'rootClose' }) - Whether menu is open, the event, and the source
• Returns: void

onSelect

• Parameters: (eventKey: any, event: SyntheticEvent) - Selected eventKey, the event
• Returns: void

onClick (Dropdown.Item)

• Parameters: (event: React.MouseEvent) - The click event
• Returns: void

Return Value

Returns a dropdown component with the following subcomponents:

• Dropdown.Toggle - The button that toggles the dropdown menu
• Dropdown.Menu - The container for dropdown items
• Dropdown.Item - Individual selectable menu items
• Dropdown.Header - A header item in the dropdown
• Dropdown.Divider - A divider between items
• Dropdown.Text - Text content in the dropdown menu

Examples

Basic Dropdown

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Split Button Dropdown

<Dropdown as={ButtonGroup}>
  <Button variant="success">Split Button</Button>

  <Dropdown.Toggle split variant="success" id="dropdown-split-basic" />

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Dropdown with Headers and Dividers

<Dropdown>
  <Dropdown.Toggle id="dropdown-basic">
    Dropdown with Headers
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Header>Group 1</Dropdown.Header>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Header>Group 2</Dropdown.Header>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Dropdown Directions

<>
  <Dropdown>
    <Dropdown.Toggle id="dropdown-down">
      Dropdown (down, default)
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item href="#">Action</Dropdown.Item>
      <Dropdown.Item href="#">Another action</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
  
  <Dropdown drop="up">
    <Dropdown.Toggle id="dropdown-up">
      Dropup
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item href="#">Action</Dropdown.Item>
      <Dropdown.Item href="#">Another action</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
  
  <Dropdown drop="left">
    <Dropdown.Toggle id="dropdown-left">
      Dropleft
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item href="#">Action</Dropdown.Item>
      <Dropdown.Item href="#">Another action</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
  
  <Dropdown drop="right">
    <Dropdown.Toggle id="dropdown-right">
      Dropright
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item href="#">Action</Dropdown.Item>
      <Dropdown.Item href="#">Another action</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
</>

Dropdown Menu Alignment

<Dropdown>
  <Dropdown.Toggle id="dropdown-alignment">
    Right-aligned menu
  </Dropdown.Toggle>
  <Dropdown.Menu align="end">
    <Dropdown.Item href="#">Action</Dropdown.Item>
    <Dropdown.Item href="#">Another action</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Dropdown with Event Handling

<Dropdown onSelect={(eventKey) => alert(`Selected ${eventKey}`)}>
  <Dropdown.Toggle id="dropdown-events">
    Click me for events
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item eventKey="action-1">Action 1</Dropdown.Item>
    <Dropdown.Item eventKey="action-2">Action 2</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Accessibility

• Uses proper ARIA attributes for dropdown menus
• Supports keyboard navigation (arrow keys, Escape)
• Focus management keeps focus within the dropdown when open
• Toggle button properly identifies the dropdown menu
• Can dismiss dropdown menu with Escape key

Best Practices

• Always include an ID on the toggle for proper accessibility
• Keep dropdown items brief and clear
• Use headers and dividers to group related items
• Consider keyboard accessibility for users navigating with a keyboard
• Use dropdown directions appropriately based on space constraints
• For mobile, ensure dropdown items are large enough for touch targets
• Use consistent styling for similar dropdown menus

Related Components

• ButtonGroup
• SplitButton
• DropdownButton
• NavDropdown
• InlineDropdown
• SelectMenu

Notes

• Based on React Bootstrap's Dropdown component
• Use DropdownButton for a simpler API when you don't need a split button
• For accessibility reasons, avoid using image-only icons for dropdown toggles without proper labeling
• Consider dropdown positioning carefully for mobile devices and smaller screens

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	5
frontend-app-dashboard	1
frontend-app-account	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/ai-studio/AiStudio.jsx
• src/pages/create-program/index.jsx
• src/pages/platform-settings/customization/contact-information/index.jsx
• src/pages/program-single/settings/index.jsx
• src/pages/utilities/notifications/NotificationsDrawer.jsx

frontend-app-dashboard

• src/pages/learning/index.jsx

frontend-app-account

• src/BlendxSettings/profile-details/index.jsx