Dropdowns

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

Basic

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.

Design

Code

<Dropdown>
    <Dropdown.Toggle variant="secondary" id="dropdown-basic">
        Dropdown Button
    </Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item href="#">Action</Dropdown.Item>
        <Dropdown.Item href="#">Another action</Dropdown.Item>
        <Dropdown.Item href="#">Something else</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

Split Button

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

Design

Code

<Dropdown as={ButtonGroup}>
    <Button variant="secondary">Split Button</Button>
    <Dropdown.Toggle split variant="secondary" id="dropdown-split-basic" />
    <Dropdown.Menu>
        <Dropdown.Item href="#">Action</Dropdown.Item>
        <Dropdown.Item href="#">Another action</Dropdown.Item>
        <Dropdown.Item href="#">Something else</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

Options

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

Design

Code

{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(
    (variant) => (
    <DropdownButton
        as={ButtonGroup}
        key={variant}
        id={`dropdown-variants-${variant}`}
        variant={variant.toLowerCase()}
        title={variant}
        className="me-1 mb-2 mb-lg-0 "                                    
        >
        <Dropdown.Item eventKey="1">Action</Dropdown.Item>
        <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
        <Dropdown.Item eventKey="3"> Something else</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
    </DropdownButton>  
    ),
)}

Sizing

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

Design

Code

{[DropdownButton, SplitButton].map((DropdownType, idx) => (
    <DropdownType
        as={ButtonGroup}
        key={idx}
        id={`dropdown-button-drop-${idx}`}
        size="lg"
        variant="secondary"
        title={idx===0 ? "Large button" : "Large split button"}
        className="me-1 mb-2 mb-lg-0 "
        >
        <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-${idx}`}
        size="sm"
        variant="secondary"
        title={idx===0 ? "Small button" : "Small split button"}
        className="me-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>
    </DropdownType>
))}

Directions

Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the drop prop.

Design

Code

<div className="mb-2">
    {['up', 'down', 'left', 'right'].map((direction) => (
        <DropdownButton
            as={ButtonGroup}
            key={direction}
            id={`dropdown-button-drop-${direction}`}
            drop={direction}
            variant="secondary"
            title={` Drop ${direction} `}
            className="me-1 mb-2 mb-lg-0"
            >
            <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>
    ))}
</div>   
<div>
    {['up', 'down', 'left', 'right'].map((direction) => (
        <SplitButton
            key={direction}
            id={`dropdown-button-drop-${direction}`}
            drop={direction}
            variant="secondary"
            title={`Drop ${direction}`}
            className="me-1 mb-2 mb-lg-0"
            >
            <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>
    ))}
</div>

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>.

Design

Code

<ButtonGroup aria-label="Basic example">
    <DropdownButton
        align="start"
        title="Left aligned dropdown "
        id="dropdown-menu-align-start"
        className="me-1 mb-2 mb-lg-0"
        >
        <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>
</ButtonGroup>
<ButtonGroup aria-label="Basic example">	
    <DropdownButton
        align="end"
        title="Right aligned dropdown "
        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>
        <Dropdown.Divider />
        <Dropdown.Item eventKey="4">
            Separated link
        </Dropdown.Item>
    </DropdownButton>
</ButtonGroup>

Responsive Menu 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.

Design

Code

<ButtonGroup aria-label="Basic example">                               
    <DropdownButton
        align={ {lg : "right"} }
        title="Left-aligned but right aligned when large screen"
        id="dropdown-menu-align-left"
        className="me-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>
</ButtonGroup>

Design

Code

<ButtonGroup aria-label="Basic example">                               
    <DropdownButton
        align={ {lg : "left"} }
        title="Right aligned but left aligned when large screen"
        id="dropdown-menu-align-right"
        className="me-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>
</ButtonGroup>

Menu content

Header

Add a header to label sections of actions in any dropdown menu.

Design

Code

<Dropdown.Menu show className="position-static" >
    <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.

Design

Code

<Dropdown.Menu show className="position-static">
    <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>

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

Design

Code

<Dropdown.Menu show className="position-static">  
        <Form className="dropdown-form p-4"> 
            <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control type="email" placeholder="Enter email" />
                <Form.Text className="text-muted">We'll never share your email with anyone else.</Form.Text>
            </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.Divider />
    <Dropdown.Item >New around here? Sign up</Dropdown.Item>                          
    <Dropdown.Item >Forgot password?</Dropdown.Item>
</Dropdown.Menu>

Design

Code

<Dropdown.Menu show className="position-static">  
        <Form className="dropdown-form p-4">  
            <Form.Group className="mb-3" controlId="formBasicEmail">
                <Form.Label>Email address</Form.Label>
                <Form.Control type="email" placeholder="Enter email" />
                <Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text>
            </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>