Hope-Ui React | Responsive Bootstrap 5 Admin doc Template

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Single button

The basic Dropdown is composed of a wrapping Dropdown and inner <DropdownMenu>, and <DropdownToggle> . By default the <DropdownToggle> will render a Button component and accepts all the same props.

<Dropdown>
    <Dropdown.Toggle variant="secondary" 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>

Since the above is such a common configuration react-bootstrap provides the <DropdownButton> component to help reduce typing. Provide a title prop and some <DropdownItem>s and you're ready to go.

<DropdownButton id="dropdown-basic-button" variant="secondary" title="Dropdown link">
    <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>
</DropdownButton>

The best part is you can do this with any button variant, too:

{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
    (variant) => (
    <DropdownButton
        as={ButtonGroup}
        key={variant}
        id={dropdown}
        variant={variant.toLowerCase()}
        title={variant}
        className="d-inline mx-1 btn-margin"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">
        Something else here
        </Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownButton>
    ),
)}

Split button

Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.

{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
    (variant) => (
    <SplitButton
        key={variant}
        id={dropdown-split}
        variant={variant.toLowerCase()}
        title={variant}
        className="d-inline mx-1 btn-margin"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">
        Something else here
        </Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </SplitButton>
    ),
)}

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

{[DropdownButton, SplitButton].map((DropdownType, idx) => (
    <DropdownType
        as={ButtonGroup}
        key={idx}
        id={dropdown-button-drop}
        size="lg"
        title="Large Button"
        className="d-inline mx-1 btn-margin"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownType>
))}

{[DropdownButton, SplitButton].map((DropdownType, idx) => (
    <DropdownType
        as={ButtonGroup}
        key={idx}
        id={dropdown-button-drop}
        size="sm"
        variant="secondary"
        title="Small Button"
        className="d-inline mx-1 btn-margin"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownType>
))}

Dark dropdowns

Opt into darker dropdowns to match a dark navbar or custom style by adding variant="dark" onto an existing DropdownMenu. Alternatively, use menuVariant="dark" when using the DropdownButton component.

<Dropdown>
    <Dropdown.Toggle id="dropdown-button-dark-example1" variant="secondary">
    Dropdown Button
    </Dropdown.Toggle>
    <Dropdown.Menu variant="dark">
    <Dropdown.Item href="#/action-1" active>
        Action
    </Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else here</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item href="#/action-4">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

Using menuVariant="dark" in a NavDropdown:

<Navbar variant="dark" bg="dark" expand="lg">
    <Container fluid>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="navbar-dark-example" />
        <Navbar.Collapse id="navbar-dark-example">
        <Nav>
            <NavDropdown
            id="nav-dropdown-dark-example"
            title="Dropdown"
            menuVariant="dark"
            >
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
        </Nav>
        </Navbar.Collapse>
    </Container>
</Navbar>

Dropup

Trigger dropdown menus above elements by adding .dropup to the parent element.

{['up'].map((direction) => (
    <DropdownButton
        as={ButtonGroup}
        key={direction}
        id={dropdown-button-drop}
        drop={direction}
        variant="secondary"
        title={Dropup}
        className="d-inline mx-1"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownButton>
    ))}
    {['up'].map((direction) => (
    <SplitButton
        key={direction}
        id={dropdown-button-drop}
        drop={direction}
        variant="secondary"
        title={Split Drop}
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </SplitButton>
    ))}

Dropright

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.

{['end'].map((direction) => (
    <DropdownButton
        as={ButtonGroup}
        key={direction}
        id={dropright-1}
        drop={direction}
        variant="secondary"
        title={Dropright}
        className="d-inline mx-1"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownButton>
    ))}
    {['end'].map((direction) => (
    <SplitButton
        key={direction}
        id={dropright-2}
        drop={direction}
        variant="secondary"
        title={Split Dropend}
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </SplitButton>
))}

Dropleft

Trigger dropdown menus at the left of the elements by adding .dropstart to the parent element.

{['start'].map((direction) => (
    <DropdownButton
        as={ButtonGroup}
        key={direction}
        id={dropleft-1}
        drop={direction}
        variant="secondary"
        title={Dropstart}
        className="d-inline mx-1"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownButton>
    ))}
    {['start'].map((direction) => (
    <SplitButton
        key={direction}
        id={dropleft-2}
        drop={direction}
        variant="secondary"
        title={Split Dropstart}
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </SplitButton>
    ))}

Menu items

You can also create non-interactive dropdown items with <Dropdown.ItemText>. Feel free to style further with custom CSS or text utilities.

<DropdownButton id="dropdown-item-button" variant="secondary" title="Dropdown">
    <Dropdown.Item as="button">Action</Dropdown.Item>
    <Dropdown.Item as="button">Another action</Dropdown.Item>
    <Dropdown.Item as="button">Something else</Dropdown.Item>
</DropdownButton>

Active

Disabled

Menu alignment

By default, a dropdown menu is aligned to the left, but you can switch it by passing align="end" to a <Dropdown>, <DropdownButton>, or <SplitButton>.

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning .dropdown-menu-end will appear on the left side.

<DropdownButton align="end" title="Right-Aligned Menu Example" variant="secondary" id="dropdown-menu-align-end">
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
  <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
</DropdownButton>

Responsive alignment

If you want to use responsive menu alignment, pass an object containing a breakpoint to the align prop on the <DropdownMenu>, <DropdownButton>, or <SplitButton>. You can specify start or end for the various breakpoints.

<div>
    <DropdownButton
    as={ButtonGroup}
    align={{ lg: 'end' }}
    title="Left-aligned but right aligned when large screen"
    id="dropdown-menu-align-responsive-1"
    variant="secondary"
    >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Something else here</Dropdown.Item>
    </DropdownButton>
</div>

<div className="mt-2">
  <SplitButton
  align={{ lg: 'start' }}
  title="Right-aligned but left aligned when large screen"
  id="dropdown-menu-align-responsive-2"
  variant="secondary"
  >
  <Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
  <Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
  </SplitButton>
</div>

Alignment options

By default, a dropdown menu is aligned to the left, but you can switch it by passing align="end" to a <Dropdown>, <DropdownButton>, or <SplitButton>.

<DropdownButton align="end" title="Dropdown" className="d-inline mx-1 btn-margin" variant="secondary" id="dropdown-menu-align-end">
    <Dropdown.Item eventKey="1">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="2">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="3">Menu item</Dropdown.Item>
</DropdownButton>
<DropdownButton align="end" variant="secondary" className="d-inline mx-1 btn-margin" title="Right-Aligned Menu" id="dropdown-menu-align-end">
    <Dropdown.Item eventKey="1">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="2">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="3">Menu item</Dropdown.Item>
</DropdownButton>
<DropdownButton align="end" variant="secondary" title="Left-Aligned, Right-Aligned Lg" className="d-inline mx-1 btn-margin" id="dropdown-menu-align-end">
    <Dropdown.Item eventKey="1">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="2">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="3">Menu item</Dropdown.Item>
</DropdownButton>
<DropdownButton align="start" variant="secondary" title="Right-Aligned, Left-Aligned Lg" className="d-inline mx-1 btn-margin" id="dropdown-menu-align-end">
    <Dropdown.Item eventKey="1">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="2">Menu item</Dropdown.Item>
    <Dropdown.Item eventKey="3">Menu item</Dropdown.Item>
</DropdownButton>

Menu content

Headers

Add a header to label sections of actions.

<Dropdown.Menu show>
    <Dropdown.Header>Dropdown header</Dropdown.Header>
    <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
    <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
</Dropdown.Menu>

Dividers

Separate groups of related menu items with a divider.

<Dropdown.Menu show>
    <Dropdown.Item eventKey="1">Action</Dropdown.Item>
    <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
    <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

Forms

The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup> , and use <FormLabel> for the label.

<Form>
    <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="email@example.com" />
    </Form.Group>

    <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
    </Form.Group>
    <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Remember Me" />
    </Form.Group>
    <Button variant="primary" type="submit">
        Sign In
    </Button>
    </Form>
    <Dropdown.Menu show>
    <Dropdown.Item href="#">New Around Here? Sign Up</Dropdown.Item>
    <Dropdown.Item href="#">Forgot Password</Dropdown.Item>
</Dropdown.Menu>

<Form>
    <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="email@example.com" />
    </Form.Group>

    <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
    </Form.Group>
    <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Remember Me" />
    </Form.Group>
    <Button variant="primary" type="submit">
        Sign In
    </Button>
</Form>

Dropdown options

<Dropdown>
    <Dropdown.Toggle variant="secondary" id="dropdown-basic">
        Offset
    </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>
    <Dropdown as={ButtonGroup}>
    <Button variant="secondary">Reference</Button>

    <Dropdown.Toggle split variant="secondary" 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>

Auto close behavior

By default, the dropdown menu is closed when selecting a menu item or clicking outside of the dropdown menu. This behaviour can be changed by using the autoClose property.

<Dropdown className="d-inline mx-1">
    <Dropdown.Toggle id="dropdown-autoclose-true" variant="secondary">
    Default Dropdown
    </Dropdown.Toggle>
    <Dropdown.Menu>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Dropdown className="d-inline mx-1 btn-margin" autoClose="inside">
    <Dropdown.Toggle id="dropdown-autoclose-inside" variant="secondary">
    Clickable Outside
    </Dropdown.Toggle>
    <Dropdown.Menu>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Dropdown className="d-inline mx-1 btn-margin" autoClose="outside">
    <Dropdown.Toggle id="dropdown-autoclose-outside" variant="secondary">
    Clickable Inside
    </Dropdown.Toggle>
    <Dropdown.Menu>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Dropdown className="d-inline mx-1 btn-margin" autoClose={false}>
    <Dropdown.Toggle id="dropdown-autoclose-false" variant="secondary">
    Manual Close
    </Dropdown.Toggle>
    <Dropdown.Menu>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    <Dropdown.Item href="#">Menu Item</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

Updated on September, 6 2025

Was this page helpful?Yes No

Documentation

Quick Start

Installation

Customization

Components

Forms

Contents

Plugin

Dropdowns

Single button

Split button

Sizing

Dark dropdowns

Dropup

Dropright

Dropleft

Menu items

Active

Disabled

Menu alignment

Responsive alignment

Alignment options

Menu content

Headers

Dividers

Text

Forms

Dropdown options

Auto close behavior

Updated on September, 6 2025