Logo
avatar
Ninfa Monaldo

Web Developer

  • Dashboard
  • dashboardnew
    • Ecommerce
    • Project
  • apps
    • Calendar
    • Profile Page
      • Profile
      • Setting
    • Projects Page
      • Projects
      • Projects Details
    • To-Do
    • Team
    • Api
    • Ticket
      • Ticket
      • Ticket Details
    • Emails Page
      • Email
      • Read Email
    • E-shop
      • Cart
      • Product
      • Add Product
      • Product-Details
      • Product list
      • Orders
      • Orders Details
      • Orders List
      • Checkout
      • Wishlist
    • Invoice
    • Chat
    • File Manager
    • Bookmark
    • kanban board
    • Timeline
    • FAQ
    • Pricing
    • Gallery
    • Blog Page
      • Blog
      • Blog Details
      • Add Blog
  • Widgets
  • Component
  • Ui Kits
    • Alert
    • Badges
    • Buttons
    • Cards
    • Dropdown
    • Grid
    • Avatar
    • Tabs
    • Accordions
    • Progress
    • Notifications
    • Lists
    • Helper Classes
    • Background
    • Divider
    • Ribbons
    • Editor
    • Collapse
    • Shadow
    • Wrapper
    • Bullet
    • Placeholder
    • Alignment Things
  • Advanced UI12+
    • Modals
    • OffCanvas Toggle
    • Sweet Alert
    • Scrollbar
    • Spinners
    • Animation
    • Video Embed
    • Tour
    • Slider
    • Bootstrap Slider
    • Scrollpy
    • Tooltip & Popovers
    • Rating
    • Prismjs
    • Count Down
    • Count Up
    • Draggable
  • Icons
    • Fontawesome
    • Flag
    • Tabler
    • Weather
    • Animated
    • Iconoir
    • Phosphor
  • Misc
  • Map & Charts
  • Map & Charts
    • Google Maps
    • Leaflet map
  • Chart
    • Chart js
    • Apexcharts
      • Line
      • Area
      • Column
      • Bar
      • Mixed
      • Timeline & Range-Bars
      • Candlestick
      • Boxplot
      • Bubble
      • Scatter
      • Heatmap
      • Treemap
      • Pie
      • Radial bar
      • Radar
  • Table & forms
  • Table
    • Basic Table
    • Data Table
    • List Js
    • Advance Table
  • Forms elements
    • Form Validation
    • Base Input
    • Checkbox & Radio
    • Input Groups
    • Input Masks
    • Floating Labels
    • Datetimepicker
    • Touch spin
    • Select2
    • Switch
    • Range Slider
    • Typeahead
    • Textarea
    • Clipboard
    • File Upload
    • Dual List Boxes
    • Default Forms
  • Ready to use4
    • Form Wizards
    • Form Wizards 1
    • Form Wizards 2
    • Ready To Use Form
    • Ready To Use Tables
  • Pages
  • Auth Pages
    • Sign In
    • Sign In with Bg-image
    • Sign Up
    • Sign Up with Bg-image
    • Password Reset
    • Password Reset with Bg-image
    • Password Create
    • Password Create with Bg-image
    • Lock Screen
    • Lock Screen with Bg-image
    • Two Step Verification
    • Two Step Verification with Bg-image
  • Error pages
    • Bad Request
    • Forbidden
    • Not Found
    • Internal Server Error
    • Service Unavailable
  • Other pages
    • Blank
    • Maintenance
    • Landing Pages
    • Coming Soon
    • Sitemap
    • Privacy Policy
    • Terms & Conditions
  • Others
  • 2 level
    • Blank
    • Another level
      • Blank
  • Document
  • Support

Dropdown

  • Ui Kits
  • Dropdown
Single Button and Link Dropdown
<Card>
  <Card.Header className="code-header">
    <h5>Single Button and Link Dropdown</h5>
  </Card.Header>
  <Card.Body className="d-flex flex-wrap gap-2">

    {/* Button Dropdown */}
    <Dropdown>
      <Dropdown.Toggle variant="primary" id="dropdown-button-1">
        Dropdown button
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item href="#">Action</Dropdown.Item>
        <Dropdown.Item href="#">Another action</Dropdown.Item>
        <Dropdown.Item href="#">Something else here</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>

    {/* Link Dropdown */}
    <Dropdown>
      <Dropdown.Toggle variant="secondary" id="dropdown-button-2">
        Dropdown link
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Dropdown.Item href="#">Action</Dropdown.Item>
        <Dropdown.Item href="#">Another action</Dropdown.Item>
        <Dropdown.Item href="#">Something else here</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>

  </Card.Body>
</Card>
Dropdown Color Variants
<Card>
  <Card.Header>
    <h5>Dropdown Color Variants</h5>
  </Card.Header>
  <Card.Body className="d-flex flex-wrap gap-2">
    <ButtonGroup className="btn-rtl">
      <Button variant="primary">
        Primary
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="primary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="secondary">
        Secondary
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="secondary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="success">
        Success
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="success"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="danger">
        Danger
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="danger"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="warning">
        Warning
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="warning"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="info">
        Info
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="info"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light">
        Light
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="dark">
        Dark
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="dark"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
  </Card.Body>
</Card>
Dropdown Outline Variants
<Card>
  <Card.Header>
    <h5>Dropdown Outline Variants</h5>
  </Card.Header>
  <Card.Body className="d-flex flex-wrap gap-2">
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-primary">
        Primary
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-primary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-secondary">
        Secondary
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-secondary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-success">
        Success
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-success"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-danger">
        Danger
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-danger"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-warning">
        Warning
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-warning"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-info">
        Info
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-info"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-light">
        Light
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-light"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="outline-dark">
        Dark
      </Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="outline-dark"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
  </Card.Body>
</Card>
Dropdown Light Variants
<Card>
  <CardBody className="d-flex flex-wrap gap-2">
    <ButtonGroup className="btn-rtl">
      <Button variant="light-primary">primary</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-primary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-secondary">secondary</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-secondary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-success">success</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-success"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-danger">danger</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-danger"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-warning">warning</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-warning"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-info">info</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-info"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-light">light</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-light"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
    <ButtonGroup className="btn-rtl">
      <Button variant="light-dark">dark</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-dark"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-start-0 outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
  </CardBody>
</Card>
Dropup Variation
<Card>
  <Card.Body className="d-flex flex-wrap gap-2">

    <ButtonGroup>
      <Button variant="light-primary">Primary</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-primary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-end outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>

    <ButtonGroup>
      <Button variant="light-secondary">Secondary</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-secondary"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-end outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>

    <ButtonGroup>
      <Button variant="light-success">Success</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-success"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-end outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>

    <ButtonGroup>
      <Button variant="light-danger">Danger</Button>
      <Dropdown>
        <Dropdown.Toggle
          variant="light-danger"
          className="dropdown-toggle dropdown-toggle-split p-2 rounded-end outline-variant"
        >
          <span className="visually-hidden">Toggle Dropdown</span>
        </Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </ButtonGroup>
  </Card.Body>
</Card>
Color Dropdown Menu
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings
  • Action
  • Another action
  • Something else here
  • Settings

© 2025 ki-admin. All rights reserved 💖 V1.0.0

Need Help