Dropdowns

Toggle contextual overlays for displaying lists of links or other content.

Static examples

import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'
import DropdownHeader from 'react-bootstrap/DropdownHeader'
import DropdownDivider from 'react-bootstrap/DropdownDivider'
import Badge from 'react-bootstrap/Badge'

export default function DropdownsStaticDemo() {
  return (
    <>
      <DropdownMenu>
        <DropdownItem href="#">Regular link</DropdownItem>
        <DropdownItem href="#">Another regular link</DropdownItem>
        <DropdownItem href="#" active>
          Active link
        </DropdownItem>
        <DropdownItem href="#" disabled>
          Disabled link
        </DropdownItem>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownHeader as="h6">Dropdown header</DropdownHeader>
        <DropdownItem href="#">Action</DropdownItem>
        <DropdownItem href="#">Another action</DropdownItem>
        <DropdownDivider />
        <DropdownItem href="#">Separated link</DropdownItem>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownItem href="#">
          <i className="ci-home opacity-75 me-2"/>
          Home
          <Badge bg="primary" pill className="ms-auto">
            2
          </Badge>
        </DropdownItem>
        <DropdownItem href="#">
          <i className="ci-user opacity-75 me-2"/>
          Profile
          <Badge bg="warning" pill className="ms-auto">
            3
          </Badge>
        </DropdownItem>
        <DropdownItem href="#">
          <i className="ci-message-square opacity-75 me-2"/>
          Messages
          <Badge bg="success" pill className="ms-auto">
            5
          </Badge>
        </DropdownItem>
        <DropdownItem href="#">
          <i className="ci-settings opacity-75 me-2"/>
          Settings
        </DropdownItem>
      </DropdownMenu>
    </>
  )
}

Dark dropdowns

import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'
import DropdownHeader from 'react-bootstrap/DropdownHeader'
import DropdownDivider from 'react-bootstrap/DropdownDivider'
import Badge from 'react-bootstrap/Badge'

export default function DropdownsDarkDemo() {
  return (
    <>
      <DropdownMenu data-bs-theme="dark">
        <DropdownItem href="#">Regular link</DropdownItem>
        <DropdownItem href="#">Another regular link</DropdownItem>
        <DropdownItem href="#" active>
          Active link
        </DropdownItem>
        <DropdownItem href="#" disabled>
          Disabled link
        </DropdownItem>
      </DropdownMenu>

      <DropdownMenu data-bs-theme="dark">
        <DropdownHeader as="h6">Dropdown header</DropdownHeader>
        <DropdownItem href="#">Action</DropdownItem>
        <DropdownItem href="#">Another action</DropdownItem>
        <DropdownDivider />
        <DropdownItem href="#">Separated link</DropdownItem>
      </DropdownMenu>

      <DropdownMenu data-bs-theme="dark">
        <DropdownItem href="#">
          <i className="ci-home opacity-75 me-2"/>
          Home
          <Badge bg="primary" pill className="ms-auto">
            2
          </Badge>
        </DropdownItem>
        <DropdownItem href="#">
          <i className="ci-user opacity-75 me-2"/>
          Profile
          <Badge bg="warning" pill className="ms-auto">
            3
          </Badge>
        </DropdownItem>
        <DropdownItem href="#">
          <i className="ci-message-square opacity-75 me-2"/>
          Messages
          <Badge bg="success" pill className="ms-auto">
            5
          </Badge>
        </DropdownItem>
        <DropdownItem href="#">
          <i className="ci-settings opacity-75 me-2"/>
          Settings
        </DropdownItem>
      </DropdownMenu>
    </>
  )
}

Forms inside dropdown

import DropdownMenu from 'react-bootstrap/DropdownMenu'
import FormLabel from 'react-bootstrap/FormLabel'
import FormControl from 'react-bootstrap/FormControl'
import FormCheck from 'react-bootstrap/FormCheck'
import Button from 'react-bootstrap/Button'

export default function DropdownsFormsDemo() {
  return (
    <DropdownMenu style={{ width: '19rem' }}>
      <form className="p-3" autoComplete="off">
        <div className="mb-3">
          <FormLabel htmlFor="exampleDropdownFormEmail">Email address</FormLabel>
          <FormControl type="email" id="exampleDropdownFormEmail" placeholder="email@example.com" required />
        </div>
        <div className="mb-3">
          <FormLabel htmlFor="exampleDropdownFormPassword">Password</FormLabel>
          <FormControl type="password" id="exampleDropdownFormPassword" placeholder="Password" required />
        </div>
        <FormCheck type="checkbox" id="dropdownCheck" label="Remember me" className="mb-3" />
        <Button type="submit">Sign In</Button>
      </form>
    </DropdownMenu>
  )
}

Directions

import Dropdown from 'react-bootstrap/Dropdown'
import DropdownToggle from 'react-bootstrap/DropdownToggle'
import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'
import DropdownDivider from 'react-bootstrap/DropdownDivider'
import Stack from 'react-bootstrap/Stack'

export default function DropdownsDirectionsDemo() {
  return (
    <Stack direction="horizontal" gap={3} className="flex-wrap">
      {(['down', 'up', 'end', 'start'] as const).map((direction) => (
        <Dropdown key={direction} drop={direction}>
          <DropdownToggle variant="outline-secondary">Drop{direction}</DropdownToggle>
          <DropdownMenu>
            <DropdownItem href="#">Action</DropdownItem>
            <DropdownItem href="#">Another action</DropdownItem>
            <DropdownDivider />
            <DropdownItem href="#">Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      ))}
    </Stack>
  )
}

Show on hover / focus

import DropdownHover from '@/components/dropdown-hover'
import DropdownToggle from 'react-bootstrap/DropdownToggle'
import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'

export default function DropdownsHoverDemo() {
  return (
    <DropdownHover>
      <DropdownToggle variant="outline-secondary" className="with-focus">
        Hover or focus over me
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem href="#">Action</DropdownItem>
        <DropdownItem href="#">Another action</DropdownItem>
        <DropdownItem href="#">Something else here</DropdownItem>
      </DropdownMenu>
    </DropdownHover>
  )
}

Menu alignment

import Dropdown from 'react-bootstrap/Dropdown'
import DropdownToggle from 'react-bootstrap/DropdownToggle'
import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'
import Stack from 'react-bootstrap/Stack'

export default function DropdownsAlignmentDemo() {
  return (
    <Stack direction="horizontal" gap={3} className="flex-wrap">
      <Dropdown align="end">
        <DropdownToggle variant="outline-secondary">Right-aligned menu example</DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>

      <Dropdown drop="down-centered">
        <DropdownToggle variant="outline-secondary">Center-aligned dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </Stack>
  )
}

Split button

import Dropdown from 'react-bootstrap/Dropdown'
import DropdownToggle from 'react-bootstrap/DropdownToggle'
import DropdownMenu from 'react-bootstrap/DropdownMenu'
import DropdownItem from 'react-bootstrap/DropdownItem'
import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Button from 'react-bootstrap/Button'

export default function DropdownsSplitButtonDemo() {
  return (
    <Dropdown as={ButtonGroup}>
      <Button variant="outline-primary">Button</Button>
      <DropdownToggle split variant="outline-primary">
        <span className="visually-hidden">Dropdown toggle</span>
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem href="#">Action</DropdownItem>
        <DropdownItem href="#">Another action</DropdownItem>
        <DropdownItem href="#">Something else here</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  )
}