Spruha - Dropdown

Dropdowns

<div className="btn-list d-flex align-items-center flex-wrap">
<Dropdown className="dropdown">
    <Dropdown.Toggle variant='' className="btn btn-primary dropdown-toggle" type="button"
        id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul" className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Dropdown className="dropdown">
    <Dropdown.Toggle className="btn btn-secondary dropdown-toggle" href="#" role="button"
        id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul" className="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
</div>

Single dropdown buttons

{SingleButtons.map((idx)=>(
<div className="btn-group" key={Math.random()}>
    <Dropdown>
    <Dropdown.Toggle type="button" variant={idx.class} className="btn"
        data-bs-toggle="dropdown" aria-expanded="false">
        Action
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
    </Dropdown>
</div>
))}

Rounded Button Dropdowns

 {SingleButtons.map((idx)=>(
<div className="btn-group">
<Dropdown>
    <Dropdown.Toggle variant={idx.class} type="button" className="btn dropdown-toggle rounded-pill"
        data-bs-toggle="dropdown" aria-expanded="false">
        Action
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
    </Dropdown>
</div>
))}

Outline Button Dropdowns

  {OutlineButtons.map((idx)=>(
<div className="btn-group" key={Math.random()}>
    <Dropdown.Toggle variant={idx.class} type="button" className="btn  dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">
        Action
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</div>
))}

Rounded Outline Dropdowns

   {OutlineButtons.map((idx)=>(
<div className="btn-group" key={Math.random()}>
    <Button variant={idx.class} type="button" className="btn dropdown-toggle rounded-pill"
        data-bs-toggle="dropdown" aria-expanded="false">
        Action
    </Button>
    <Dropdown.Menu as="ul">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</div>
))}

Split buttons

{SplitButtons.map((idx)=>(
<div className="btn-group my-1" key={Math.random()}>
    <Button variant={idx.class} type="button" className="btn btn-primary">Action</Button>
    <Dropdown.Toggle variant={idx.class} type="button"
        className="btn btn-primary dropdown-toggle dropdown-toggle-split me-2"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span className="visually-hidden">Toggle Dropdown</span>
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</div>
))}

Dropdown Sizing

<div className="btn-group my-1 me-2">
<Dropdown>
<Dropdown.Toggle variant='' className="btn btn-primary btn-lg dropdown-toggle" type="button"
     data-bs-toggle="dropdown" aria-expanded="false">
     Large button
 </Dropdown.Toggle>
 <Dropdown.Menu as="ul">
     <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
     <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
     <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
     <Dropdown.Divider className="dropdown-divider" />
     <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
 </Dropdown.Menu>
</Dropdown>
</div>
<div className="btn-group my-1 me-2">=
 <Dropdown as={ButtonGroup}>
 <Button variant="light">Large split button</Button>
 <Dropdown.Toggle  split variant="light" 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.Divider className="dropdown-divider" />
     <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
 </Dropdown.Menu>
 </Dropdown>
</div>

Dropup

 <Dropdown drop="up" className="btn-group dropup my-1 me-2">
<Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
</Dropdown.Toggle>
<Dropdown.Menu as="ul">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    <li>
        <hr className="dropdown-divider"/>
    </li>
    <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Dropdown drop="up" className="btn-group dropup my-1">
<Button variant='' type="button" className="btn btn-info">
    Split dropup
</Button>
<Dropdown.Toggle variant='' type="button"
    className="btn btn-info dropdown-toggle dropdown-toggle-split"
    data-bs-toggle="dropdown" aria-expanded="false">
    <span className="visually-hidden">Toggle Dropdown</span>
</Dropdown.Toggle>
<Dropdown.Menu as="ul">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    <li>
        <hr className="dropdown-divider"/>
    </li>
    <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Dropup right

<Dropdown className="btn-group dropend my-1 me-2" drop="end">
<Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
</Dropdown.Toggle>
<Dropdown.Menu as="ul">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    <li>
        <hr className="dropdown-divider"/>
    </li>
    <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
 </Dropdown>
 <Dropdown drop="end" className="btn-group dropend my-1">
<Button variant='' type="button" className="btn btn-info">
    Split dropend
</Button>
<Dropdown.Toggle variant='' type="button"
    className="btn btn-info dropdown-toggle dropdown-toggle-split"
    data-bs-toggle="dropdown" aria-expanded="false">
    <span className="visually-hidden">Toggle Dropright</span>
</Dropdown.Toggle>
<Dropdown.Menu as="ul">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    <li>
        <hr className="dropdown-divider"/>
    </li>
    <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
 </Dropdown>

Dropup left

<Dropdown className="btn-group dropstart my-1 me-2" drop="start">
<Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
</Dropdown.Toggle>
<Dropdown.Menu as="ul">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    <li>
        <hr className="dropdown-divider"/>
    </li>
    <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
 </Dropdown>
 <div className="btn-group">
<Dropdown className="btn-group dropstart my-1" role="group" drop="start">
    <Dropdown.Toggle variant='' type="button"
        className="btn btn-info dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span className="visually-hidden">Toggle Dropstart</span>
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul">
        <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>
<Button variant='' type="button" className="btn btn-info my-1">
    Split dropstart
</Button>
 </div>

Active

<Dropdown>
 <Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
     data-bs-toggle="dropdown" aria-expanded="false">
     Dropstart
 </Dropdown.Toggle>
 <Dropdown.Menu as="ul">
     <Dropdown.Item as="li" href="#">Regular link</Dropdown.Item>
     <Dropdown.Item className="dropdown-item active" href="#" aria-current="true">Active
             link
     </Dropdown.Item>
     <Dropdown.Item as="li" href="#">Another link</Dropdown.Item>
 </Dropdown.Menu>
 </Dropdown>

Disabled

  <Dropdown>
 <Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
 data-bs-toggle="dropdown" aria-expanded="false">
 Dropstart
 </Dropdown.Toggle>
 <Dropdown.Menu as="ul">
     <Dropdown.Item as="li" href="#">Regular link</Dropdown.Item>
     <Dropdown.Item className="dropdown-item disabled" href="#" aria-current="true">Active
             link</Dropdown.Item>
     <Dropdown.Item as="li" href="#">Another link</Dropdown.Item>
 </Dropdown.Menu>
 </Dropdown>

Auto close behavior

 {AutocloseButtons.map((idx)=>(
 <div className="btn-group">
 <Dropdown>
     <Dropdown.Toggle variant={idx.class} className="btn btn-primary dropdown-toggle" type="button"
         id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true"
         aria-expanded="false">
         {idx.text}
     </Dropdown.Toggle>
     <Dropdown.Menu as="ul" aria-labelledby="defaultDropdown">
         <Dropdown.Item as="li" href="#">Menu item</Dropdown.Item>
         <Dropdown.Item as="li" href="#">Menu item</Dropdown.Item>
         <Dropdown.Item as="li" href="#">Menu item</Dropdown.Item>
     </Dropdown.Menu>
     </Dropdown>
 </div>
 ))}

dropdowns with Forms

 <Dropdown>
<Dropdown.Toggle variant='' className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
    data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu">
    <Form className="px-4 py-3">
        <div className="mb-3">
            <Form.Label htmlFor="exampleDropdownFormEmail1" className="form-label">Email
                address</Form.Label>
            <Form.Control type="email" className="form-control" id="exampleDropdownFormEmail1"
                placeholder="email@example.com"/>
        </div>
        <div className="mb-3">
            <Form.Label 
                className="form-label">Password</Form.Label>
            <Form.Control type="password" className="form-control"
                id="exampleDropdownFormPassword1" placeholder="Password"/>
        </div>
        <div className="mb-3">
            <div className="form-check">
                <input type="checkbox" className="form-check-input" id="dropdownCheck"/>
                <label className="form-check-label" htmlFor="dropdownCheck">
                    Remember me
                </label>
            </div>
        </div>
        <Button variant='' type="submit" className="btn btn-primary">Sign in</Button>
    </Form>
    <div className="dropdown-divider"></div>
    <Dropdown.Item as="li" href="#">New around here? Sign up</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Forgot password?</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Dropdown menu centered

Use .dropdown-center on the parent element.

<Dropdown className="dropdown-center">
<Dropdown.Toggle variant='' className="btn btn-primary dropdown-toggle" type="button"
    id="dropdownCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
</Dropdown.Toggle>
<Dropdown.Menu as="ul" aria-labelledby="dropdownCenterBtn">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Action two</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Action three</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Dropup centered

Use .dropup-center on the parent element.

<Dropdown className="dropup-center dropup" drop="up">
<Dropdown.Toggle variant='' className="btn btn-secondary dropdown-toggle" type="button"
    id="dropupCenterBtn" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
</Dropdown.Toggle>
<Dropdown.Menu as="ul" aria-labelledby="dropupCenterBtn">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Action two</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Action three</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Menu items

You can use <a> or <button> as dropdown items.

<Dropdown className="dropdown">
<Dropdown.Toggle variant='' className="btn btn-info dropdown-toggle" type="button"
    id="dropdownMenu1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
</Dropdown.Toggle>
<Dropdown.Menu as="ul" aria-labelledby="dropdownMenu1">
    <Dropdown.Item><Button variant='' as="li" type="button">Action</Button></Dropdown.Item>
    <Dropdown.Item><Button variant='' as="li" type="button">Another action</Button>
    </Dropdown.Item>
    <Dropdown.Item><Button variant='' as="li" type="button">Something else
            here</Button>
    </Dropdown.Item>
</Dropdown.Menu>
   </Dropdown>

Dropdowns options

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

<Dropdown className="dropdown me-1">
<Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
    id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false"
    data-bs-offset="10,20">
    Offset
</Dropdown.Toggle>
<Dropdown.Menu as="ul" aria-labelledby="dropdownMenuOffset">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<div className="btn-group">
<Button variant='' type="button" className="btn btn-info">Reference</Button>
<Button variant='' type="button"
    className="btn btn-info dropdown-toggle dropdown-toggle-split"
    id="dropdownMenuReference" data-bs-toggle="dropdown"
    aria-expanded="false" data-bs-reference="parent">
    <span className="visually-hidden">Toggle Dropdown</span>
</Button>
<Dropdown.Menu as="ul" aria-labelledby="dropdownMenuReference">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
    <li>
        <hr className="dropdown-divider"/>
    </li>
    <Dropdown.Item as="li" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>
</div>

Alignment options

{AlignmentButtons.map((idx)=>(
<div className="btn-group" key={Math.random()}>
    <Dropdown drop={idx.dir}>
    <Dropdown.Toggle variant={idx.class} className="btn btn-primary dropdown-toggle mb-0" type="button"
        id="dropdownMenuButton" data-bs-toggle="dropdown"
        aria-expanded="false">
        {idx.text}
    </Dropdown.Toggle>
    <Dropdown.Menu as="ul" aria-labelledby="dropdownMenuButton">
        <Dropdown.Item as="li" href="#">Menu item</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Menu item</Dropdown.Item>
        <Dropdown.Item as="li" href="#">Menu item</Dropdown.Item>
    </Dropdown.Menu>
    </Dropdown>
</div>
))}

Dark Dropdowns

<Dropdown>
<Dropdown.Toggle variant='' className="btn btn-dark dropdown-toggle" type="button"
    id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu dropdown-menu-dark">
    <Dropdown.Item as="li" href="#">Action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Another action</Dropdown.Item>
    <Dropdown.Item as="li" href="#">Something else here</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Menu alignment

<Dropdown>
<Dropdown.Toggle variant='' type="button" className="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu dropdown-menu-end">
    <Dropdown.Item><button className="dropdown-item" type="button">Action</button>
    </Dropdown.Item>
    <Dropdown.Item><button className="dropdown-item" type="button">Another
            action</button></Dropdown.Item>
    <Dropdown.Item><button className="dropdown-item" type="button">Something else
            here</button>
    </Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

Responsive alignment end

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

Responsive alignment left

<DropdownButton as={ButtonGroup} align={{ lg: 'start' }} title="Left-aligned but right aligned when large screen" id="dropdown-menu-align-responsive-1">
<Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
<Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
</DropdownButton>

Custom Dropdown Menu's

<DropdownButton as={ButtonGroup} align={{ lg: 'start' }} title="Left-aligned but right aligned when large screen" id="dropdown-menu-align-responsive-1">
<Dropdown.Item eventKey="1">Action 1</Dropdown.Item>
<Dropdown.Item eventKey="2">Action 2</Dropdown.Item>
</DropdownButton>

Ghost Button Dropdowns

 {GhostButtons.map((idx)=>(
<div className="btn-group" key={Math.random()}>
    <Dropdown>
    <Dropdown.Toggle variant={idx.class} type="button" className="btn btn-primary-ghost dropdown-toggle"
        data-bs-toggle="dropdown" aria-expanded="false">
        {idx.text}
    </Dropdown.Toggle>
    <Dropdown.Menu>
        <Dropdown.Item className="dropdown-item" href="#">Action</Dropdown.Item>
        <Dropdown.Item className="dropdown-item" href="#">Another action</Dropdown.Item>
        <Dropdown.Item className="dropdown-item" href="#">Something else here</Dropdown.Item>
        <li>
            <hr className="dropdown-divider"/>
        </li>
        <Dropdown.Item className="dropdown-item" href="#">Separated link</Dropdown.Item>
    </Dropdown.Menu>
    </Dropdown>
</div>
))}

non-interactive dropdown items

Use .dropdown-item-text. to create non-interactive dropdown items.

 <Dropdown.Menu className="dropdown-menu">
 <Dropdown.Item><span className="dropdown-item-text">Dropdown item text</span>
 </Dropdown.Item>
 <Dropdown.Item><a className="dropdown-item" href="#">Action</a></Dropdown.Item>
 <Dropdown.Item><a className="dropdown-item" href="#">Another action</a></Dropdown.Item>
 <Dropdown.Item><a className="dropdown-item" href="#">Something else here</a>
 </Dropdown.Item>
</Dropdown.Menu>

Dropdown Headers

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

 <Dropdown.Menu className="dropdown-menu">
 <Dropdown.Item><span className="dropdown-item-text">Dropdown item text</span>
 </Dropdown.Item>
 <Dropdown.Item><a className="dropdown-item" href="#">Action</a></Dropdown.Item>
 <Dropdown.Item><a className="dropdown-item" href="#">Another action</a></Dropdown.Item>
 <Dropdown.Item><a className="dropdown-item" href="#">Something else here</a>
 </Dropdown.Item>
</Dropdown.Menu>

Dropdown Dividers

<Dropdown.Menu className="dropdown-menu">
<Dropdown.Header className="dropdown-header">Heading</Dropdown.Header>
<Dropdown.Item className="dropdown-item" href="#">Action</Dropdown.Item>
<Dropdown.Item className="dropdown-item" href="#">Another action</Dropdown.Item>
<Dropdown.Item className="dropdown-item" href="#">Something else here</Dropdown.Item>
<li>
    <hr className="dropdown-divider"/>
</li>
<Dropdown.Item className="dropdown-item" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>

Dropdown Menu Text

<Dropdown.Menu className="dropdown-menu">
<Dropdown.Header className="dropdown-header">Heading</Dropdown.Header>
<Dropdown.Item className="dropdown-item" href="#">Action</Dropdown.Item>
<Dropdown.Item className="dropdown-item" href="#">Another action</Dropdown.Item>
<Dropdown.Item className="dropdown-item" href="#">Something else here</Dropdown.Item>
<li>
    <hr className="dropdown-divider"/>
</li>
<Dropdown.Item className="dropdown-item" href="#">Separated link</Dropdown.Item>
</Dropdown.Menu>

Switcher

Todo

Overview

Switcher

DropDowns

Dropdown header

Todo

Overview