Dropdown

<bh-dropdown> | BharatDropdown

The Dropdown component provides a customizable selection menu that allows users to choose one option from a list. It supports multiple styling options, sizes, and variants to match your application’s design.

Open in

Option 1Option 2Option 3

Basic Usage

Preview

Open in

Option 1Option 2Option 3

HTML

 <bh-dropdown label="Select an option" size="medium" rounding="0.5">
    <bh-dropdown-item slot="menu-items">Option 1</bh-dropdown-item>
    <bh-dropdown-item slot="menu-items">Option 2</bh-dropdown-item>
    <bh-divider slot="menu-items"></bh-divider>
    <bh-dropdown-item slot="menu-items">Option 3</bh-dropdown-item>
  </bh-dropdown>

React

import React from 'react';
import { BharatDropdown,BharatDropdownItem} from 'bharat-ui/react/components/dropdown'

function App() {
  return (
    <>
    <BharatDropdown label="Select an option" size="medium" rounding="0.5">
    <BharatDropdownItem slot="menu-items">Option 1</BharatDropdownItem>
    <BharatDropdownItem slot="menu-items">Option 2</BharatDropdownItem>
    <BharatDivider slot="menu-items"></BharatDivider>
    <BharatDropdownItem slot="menu-items">Option 3</BharatDropdownItem>
    </BharatDropdown>
    </>
  );
}
export default App;

Interactive Playground

Experiment with different properties of the dropdown component.

Open in

Option 1

Option 2

Option 3

Option 4

Basic Properties

Size	Small Medium Large
Variant	Normal GradientTricolorOutlinedLinkPrimarySecondaryWarningDangerSuccess
Rounding
Label

State Options

Disabled

Link URL (for link variant)

Size Variations

The dropdown component supports different size options to fit your design needs.

Preview

Open in

Option 1Option 2Option 3Option 1Option 2Option 3Option 1Option 2Option 3

HTML

<bh-dropdown label="Small" size="small" rounding="0.5">
<bh-dropdown-item slot="menu-items">Option 1</bh-dropdown-item>
<bh-dropdown-item slot="menu-items">Option 2</bh-dropdown-item>
<bh-dropdown-item slot="menu-items">Option 3</bh-dropdown-item>
</bh-dropdown>

<bh-dropdown label="Medium" size="medium" rounding="0.5">
<bh-dropdown-item slot="menu-items">Option 1</bh-dropdown-item>
<bh-dropdown-item slot="menu-items">Option 2</bh-dropdown-item>
<bh-dropdown-item slot="menu-items">Option 3</bh-dropdown-item>
 </bh-dropdown>

<bh-dropdown label="Large" size="large"  rounding="0.5">
<bh-dropdown-item slot="menu-items">Option 1</bh-dropdown-item>
<bh-dropdown-item slot="menu-items">Option 2</bh-dropdown-item>
<bh-dropdown-item slot="menu-items">Option 3</bh-dropdown-item>
</bh-dropdown>

React

import React from 'react';
import { BharatDropdown,BharatDropdownItem} from 'bharat-ui/react/components/dropdown'

function App() {
  return (
    <>
    <BharatDropdown label="Select an option" size="small" rounding="0.5">
      <BharatDropdownItem slot="menu-items">Option 1</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 2</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 3</BharatDropdownItem>
    </BharatDropdown>
    <BharatDropdown label="Select an option" size="medium" rounding="0.5">
      <BharatDropdownItem slot="menu-items">Option 1</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 2</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 3</BharatDropdownItem>
    </BharatDropdown>
    <BharatDropdown label="Select an option" size="large" rounding="0.5">
      <BharatDropdownItem slot="menu-items">Option 1</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 2</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 3</BharatDropdownItem>
    </BharatDropdown>
    </>
  );
}
export default App;

Complex Menu Example

A dropdown with multiple sections separated by dividers.

Preview

Open in

New ItemOpenSaveExportImportDelete

HTML

<bh-dropdown label="Complex Menu" size="large" variant="outlined" rounding="0.5">
  <bh-dropdown-item slot="menu-items" value="new">New Item</bh-dropdown-item>
  <bh-dropdown-item slot="menu-items" value="open">Open</bh-dropdown-item>
  <bh-dropdown-item slot="menu-items" value="save">Save</bh-dropdown-item>
  <bh-divider slot="menu-items"></bh-divider>
  <bh-dropdown-item slot="menu-items" value="export">Export</bh-dropdown-item>
  <bh-dropdown-item slot="menu-items" value="import">Import</bh-dropdown-item>
  <bh-divider slot="menu-items"></bh-divider>
  <bh-dropdown-item slot="menu-items" value="delete" disabled>Delete</bh-dropdown-item>
</bh-dropdown>

React

import React from 'react';
import { BharatDropdown,BharatDropdownItem} from 'bharat-ui/react/components/dropdown'

function App() {
  return (
      <BharatDropdown
        label="Complex Menu"
        size="large"
        variant="outlined"
        rounding={0.5}
        style={{ '--dropdown-z-index': 1000 }}
      >
        <BharatDropdownItem slot="menu-items" value="new">New Item</BharatMenuItem>
        <BharatDropdownItem slot="menu-items" value="open">Open</BharatMenuItem>
        <BharatDropdownItem slot="menu-items" value="save">Save</BharatMenuItem>
        <BharatDropdownItem slot="menu-items" />
        <BharatDropdownItem  slot="menu-items" value="export">Export</BharatDropdownItem>
        <BharatDropdownItem  slot="menu-items" value="import">Import</BharatDropdownItem>
        <BharatDropdownItem slot="menu-items" />
        <BharatDropdownItem  slot="menu-items" value="delete">Delete</BharatDropdownItem>
      </BharatDropdown>
  );
}
export default App;

Disabled Dropdown Items

You can disable specific dropdown items to prevent user selection also apply divider to dropdown option using disabled attribute

Preview

Open in

Option 1Option 2Option 3

HTML

<bh-dropdown label="Disabled Dropdown">
  <bh-menu-item slot="menu-items" value="option1">Option 1</bh-menu-item>
  <bh-menu-item slot="menu-items" value="option2" disabled>Option 2 (Disabled)</bh-menu-item>
  <bh-divider slot="menu-items"></bh-divider>
  <bh-menu-item slot="menu-items" value="option3">Option 3</bh-menu-item>
</bh-dropdown>

React

import React from 'react';
import { BharatDropdown,BharatDropdownItem} from 'bharat-ui/react/components/dropdown'

function App() {
  return (
    <BharatDropdown label="Disabled Dropdown">
      <BharatDropdownItem slot="menu-items" disabled>Option 1</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 2</BharatDropdownItem>
      <BharatDropdownItem slot="menu-items">Option 3</BharatDropdownItem>
    </BharatDropdown>
  );
}
export default App;

Properties

Property	Type	Description
size	string	Size of the dropdown (small, medium, large)
variant	string	Style variant (normal, gradient, tricolor, outlined, link, etc.)
label	string	Default label text shown when no item is selected
rounding	number	Border radius in em units
disabled	boolean	Whether the dropdown is disabled
open	boolean	Whether the dropdown menu is open
selectedIndex	number	Index of the currently selected item (-1 if none)
href	string	URL to navigate to when using the link variant

---

Dropdown Item Properties

The <bh-dropdown-item> component has the following properties:

Property	Type	Description
value	string	Value associated with this dropdown item
disabled	boolean	Whether the dropdown item is disabled