React Bootstrap Dropdowns

A dropdown tucks a list of actions or links behind one button, so they are close at hand without taking up room. The navbar menus of AdminKit are dropdowns.

Three React components build them: Dropdown, DropdownToggle and DropdownMenu. They open Bootstrap's dropdown menus from React state, without Bootstrap's JavaScript or react-bootstrap. They are in the free and PRO versions of AdminKit for React.

You write Bootstrap's markup and classes. The components add .show, the ARIA attributes and the keyboard handling. The Floating UI library positions the menu 2px from the toggle, and flips it when there is no room.

ExampleCopy Anchor Link

Give the Dropdown wrapper the dropdown or btn-group class, since it adds no class of its own. The toggle needs dropdown-toggle for its caret.

import {
  Dropdown,
  DropdownMenu,
  DropdownToggle,
} from "@/components/bootstrap/dropdown";

export function ProjectActions() {
  return (
    <Dropdown className="dropdown">
      <DropdownToggle as="button" className="btn btn-primary dropdown-toggle">
        Actions
      </DropdownToggle>
      <DropdownMenu as="ul">
        <li><a className="dropdown-item" href="#">Edit</a></li>
        <li><a className="dropdown-item" href="#">Duplicate</a></li>
        <li><hr className="dropdown-divider" /></li>
        <li><a className="dropdown-item" href="#">Archive</a></li>
      </DropdownMenu>
    </Dropdown>
  );
}

PropsCopy Anchor Link

Other props of Dropdown, such as className, go to the wrapper. The components are in src/components/bootstrap/dropdown.tsx.

• DropdownToggle is a link (<a href="#" role="button">) unless as="button", which gets type="button". It sets aria-expanded and aria-controls and gets .show while the menu is open. Its onClick and onKeyDown still run.
• DropdownMenu takes as ("div" by default) and align ("start" or "end", read from .dropdown-menu-end by default). It adds .dropdown-menu.

Split buttonCopy Anchor Link

Use a split button when one action is the obvious choice and the others can wait in a menu. It is a btn-group with a normal button and a toggle with dropdown-toggle-split:

<Dropdown className="btn-group">
  <button type="button" className="btn btn-success" onClick={publish}>
    Publish
  </button>
  <DropdownToggle as="button" className="btn btn-success dropdown-toggle dropdown-toggle-split">
    <span className="visually-hidden">More publish options</span>
  </DropdownToggle>
  <DropdownMenu as="ul">
    <li><a className="dropdown-item" href="#">Schedule</a></li>
    <li><a className="dropdown-item" href="#">Save as draft</a></li>
  </DropdownMenu>
</Dropdown>

Alignment and directionCopy Anchor Link

Near the edge of the screen, or at the bottom of a card, you may want the menu somewhere else. dropdown-menu-end on the menu aligns it to the end of the toggle. dropup, dropend and dropstart on the wrapper open it above, to the right or to the left. The components read these classes, and the align and drop props set the same without them.

<>
  <Dropdown className="btn-group me-2">
    <DropdownToggle as="button" className="btn btn-secondary dropdown-toggle">End aligned</DropdownToggle>
    <DropdownMenu as="ul" className="dropdown-menu-end">
      <li><a className="dropdown-item" href="#">Menu item</a></li>
      <li><a className="dropdown-item" href="#">Menu item</a></li>
    </DropdownMenu>
  </Dropdown>
  <Dropdown className="btn-group dropup">
    <DropdownToggle as="button" className="btn btn-secondary dropdown-toggle">Dropup</DropdownToggle>
    <DropdownMenu as="ul">
      <li><a className="dropdown-item" href="#">Menu item</a></li>
      <li><a className="dropdown-item" href="#">Menu item</a></li>
    </DropdownMenu>
  </Dropdown>
</>

In a table or a scrolling card, the container can cut off the menu. strategy="fixed" positions it relative to the window instead, as the menus of the tasks board and the AI chat history in AdminKit PRO do.

In the navbarCopy Anchor Link

The navbar menus are li elements with display="static", so the navbar's CSS places the menu. Links to pages of the app use React Router's Link:

import { Link } from "react-router";

<Dropdown as="li" className="nav-item dropdown" display="static">
  <DropdownToggle className="nav-link dropdown-toggle">Account</DropdownToggle>
  <DropdownMenu className="dropdown-menu-end">
    <Link className="dropdown-item" to="/pages-profile">Profile</Link>
    <Link className="dropdown-item" to="/pages-settings">Settings</Link>
    <div className="dropdown-divider" />
    <a className="dropdown-item" href="#">Log out</a>
  </DropdownMenu>
</Dropdown>

Auto closeCopy Anchor Link

By default, a click on an item or anywhere outside closes the menu. autoClose changes which clicks do:

Only the toggle and Escape close a menu with autoClose={false}. Links and buttons inside a <form> in the menu never close it, so a form in a dropdown keeps its menu open while the user fills it in.

Menu contentCopy Anchor Link

The menu takes Bootstrap's classes: .dropdown-item (on a link or a button), .dropdown-item-text, .dropdown-header, .dropdown-divider, and .active or .disabled on an item. See Bootstrap's dropdown docs for all of them.

AccessibilityCopy Anchor Link

• The toggle has aria-expanded and aria-controls pointing at the menu's id, which Dropdown generates.
• Arrow Down and Arrow Up on the toggle open the menu and focus its first or last item. In the menu they move between the items that are not disabled.
• Escape closes the menu and returns the focus to the toggle.
• A toggle with only an icon or a caret needs a text for screen readers, such as a visually-hidden span or an aria-label.
• Mark the current item with .active and aria-current="page" (or "true").

RelatedCopy Anchor Link

• Next.js Bootstrap dropdowns: the same components in AdminKit for Next.js
• Bootstrap 5 dropdowns: the dropdowns of the HTML version
• Offcanvas: a side panel for longer menus
• Buttons demo: button dropdowns in every theme color