#
  • Dashboard
  • dashboard4
    • Project
    • Ecommerce
  • 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
    • Tree View
  • 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 usenew
    • 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
  • 26 °C
  • EN
  • 5
  • avatar

  • Copyright © 2025 axelit. All rights reserved 💖

  • V1.0.0
  • Need Help

Dropdown

  • Ui Kits
  • Dropdown
Single Button and Link Dropdown
ActionAnother actionSomething else here
ActionAnother actionSomething else here
<Card>
  <CardHedaer ClassName="code-header">
    <h5>Single Button and Link Dropdown</h5>
  </CardHedaer>
  <CardBody class=" d-flex flex-wrap gap-2">
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
            <DropdownToggle color="primary" caret>
              Dropdown button
            </DropdownToggle>
            <DropdownMenu>
                  <DropdownItem  href="#">
          Action
        </DropdownItem>
        <DropdownItem  href="#">
          Another action
        </DropdownItem>
        <DropdownItem  href="#">
          Something else here
        </DropdownItem>
            </DropdownMenu>
          </Dropdown>
    <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
            <DropdownToggle color="secondary" caret>
              Dropdown link
            </DropdownToggle>
            <DropdownMenu>
                      <DropdownItem  href="#">
          Action
        </DropdownItem>
        <DropdownItem  href="#">
          Another action
        </DropdownItem>
        <DropdownItem  href="#">
          Something else here
        </DropdownItem>
            </DropdownMenu>
          </Dropdown>
  </CardBody>
</Card>
Dropdown Color Variant
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<Card>
  <CardHeader className="code-header">
    <h5>Dropdown Outline Variants</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button color="primary">Primary</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button color="secondary">Secondary</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</Card>
Dropdown Outline Variants
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<Card>
  <CardHeader className="code-header">
    <h5>Dropdown Outline Variants</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="primary">Primary</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="secondary">Secondary</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</Card>
Dropdown Light Variants
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<Card>
  <CardHeader className="code-header">
    <h5>Dropdown Outline Variants</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="primary">Primary</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="secondary">Secondary</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</Card>
Dropup Variation
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
<Card>
  <CardHeader className="code-header">
    <h5>Dropdown Outline Variants</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="primary">Primary</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="secondary">Secondary</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">Toggle Dropdown</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">Action</DropdownItem>
          <DropdownItem href="#">Another action</DropdownItem>
          <DropdownItem href="#">Something else here</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">Separated link</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</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