Toggle contextual overlays for displaying lists of links or other content.
import Dropdown from 'react-bootstrap/Dropdown'
{/* Dropdown example with active and disabled links */}
<Dropdown.Menu show className='position-static'>
<Dropdown.Item eventKey='1'>Some action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Item eventKey='3' active>Active</Dropdown.Item>
<Dropdown.Item eventKey='4' disabled>Disabled</Dropdown.Item>
</Dropdown.Menu>
{/* Dropdown example with header and dividers */}
<Dropdown.Menu show className='position-static'>
<Dropdown.Header as='h6'>Dropdown header</Dropdown.Header>
<Dropdown.Divider />
<Dropdown.Item eventKey='1'>Some action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Separated link</Dropdown.Item>
</Dropdown.Menu>
{/* Dropdown example with icons and badges */}
<Dropdown.Menu show className='position-static'>
<Dropdown.Item eventKey='1'>
<i className='fi-home opacity-70 me-2'></i>
Home
<Badge bg='secondary' className='ms-2'>2</Badge>
</Dropdown.Item>
<Dropdown.Item eventKey='2'>
<i className='fi-user opacity-70 me-2'></i>
Profile
<Badge bg='info' className='ms-2'>3</Badge>
</Dropdown.Item>
<Dropdown.Item eventKey='3'>
<i className='fi-chat-left opacity-70 me-2'></i>
Messages
<Badge bg='success' className='ms-2'>5</Badge>
</Dropdown.Item>
<Dropdown.Item eventKey='4'>
<i className='fi-settings opacity-70 me-2'></i>
Settings
<Badge bg='warning' className='ms-2'>1</Badge>
</Dropdown.Item>
</Dropdown.Menu>
import Link from 'next/link'
import Dropdown from 'react-bootstrap/Dropdown'
{/* Add as={Link} prop to <Dropdown.Item> so the links work as expected without page reload. */}
<Dropdown.Menu show className='position-static'>
<Dropdown.Item as={Link} href='#'>Regular link</Dropdown.Item>
<Dropdown.Item as={Link} href='#'>Another regular link</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item as={Link} href='#'>Separated link</Dropdown.Item>
</Dropdown.Menu>
import Dropdown from 'react-bootstrap/Dropdown'
{/* Dark dropdown example with active and disabled links */}
<Dropdown.Menu show variant='dark' className='position-static'>
<Dropdown.Item eventKey='1'>Some action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Item eventKey='3' active>Active</Dropdown.Item>
<Dropdown.Item eventKey='4' disabled>Disabled</Dropdown.Item>
</Dropdown.Menu>
{/* Dark dropdown example with header and dividers */}
<Dropdown.Menu show variant='dark' className='position-static'>
<Dropdown.Header as='h6'>Dropdown header</Dropdown.Header>
<Dropdown.Divider as='div' />
<Dropdown.Item eventKey='1'>Some action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider as='div' />
<Dropdown.Item eventKey='3'>Separated link</Dropdown.Item>
</Dropdown.Menu>
{/* Dark dropdown example with icons and badges */}
<Dropdown.Menu show variant='dark' className='position-static'>
<Dropdown.Item eventKey='1'>
<i className='fi-home me-2'></i>
Home
<Badge bg='secondary' className='ms-2'>2</Badge>
</Dropdown.Item>
<Dropdown.Item eventKey='2'>
<i className='fi-user me-2'></i>
Profile
<Badge bg='info' className='ms-2'>3</Badge>
</Dropdown.Item>
<Dropdown.Item eventKey='3'>
<i className='fi-chat-left me-2'></i>
Messages
<Badge bg='success' className='ms-2'>5</Badge>
</Dropdown.Item>
<Dropdown.Item eventKey='4'>
<i className='fi-settings me-2'></i>
Settings
<Badge bg='warning' className='ms-2'>1</Badge>
</Dropdown.Item>
</Dropdown.Menu>
import Dropdown from 'react-bootstrap/Dropdown'
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
{/* Forms inside dropdown */}
<Dropdown.Menu show className='position-static' style={{width: '19rem'}}>
<Form className='p-4' autoComplete='off'>
<Form.Group className='mb-3' controlId='exampleDropdownFormEmail'>
<Form.Label>Email address</Form.Label>
<Form.Control type='email' placeholder='email@example.com' required />
</Form.Group>
<Form.Group className='mb-3' controlId='exampleDropdownFormPassword'>
<Form.Label>Password</Form.Label>
<Form.Control type='password' placeholder='Password' required />
</Form.Group>
<Form.Check type='checkbox' id='dropdownCheck' label='Remember me' className='mb-3' />
<Button type='submit' variant='primary'>Sign In</Button>
</Form>
</Dropdown.Menu>
import Dropdown from 'react-bootstrap/Dropdown'
{/* Dropdown */}
<Dropdown>
<Dropdown.Toggle variant='outline-secondary'>Dropdown</Dropdown.Toggle>
<Dropdown.Menu className='my-1'>
<Dropdown.Item eventKey='1'>Action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{/* Dropup */}
<Dropdown drop='up'>
<Dropdown.Toggle variant='outline-secondary'>Dropup</Dropdown.Toggle>
<Dropdown.Menu className='my-1'>
<Dropdown.Item eventKey='1'>Action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{/* Dropend */}
<Dropdown drop='end'>
<Dropdown.Toggle variant='outline-secondary'>Dropend</Dropdown.Toggle>
<Dropdown.Menu className='mx-1'>
<Dropdown.Item eventKey='1'>Action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{/* Dropstart */}
<Dropdown drop='start'>
<Dropdown.Toggle variant='outline-secondary'>Dropstart</Dropdown.Toggle>
<Dropdown.Menu className='mx-1'>
<Dropdown.Item eventKey='1'>Action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
import Dropdown from 'react-bootstrap/Dropdown'
{/* Right aligned dropdown menu */}
<Dropdown>
<Dropdown.Toggle variant='primary'>Right-aligned menu</Dropdown.Toggle>
<Dropdown.Menu align='end' className='my-1'>
<Dropdown.Item eventKey='1'>Action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>