- var theme_customizer = true;
- var tooltip = true;
- var sidebar = true;
- var scrollbar = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
// page-wrapper Start
#pageWrapper.page-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper.horizontal-menu
include ../../components/sidebar
.page-body
.container-fluid
.page-header
.row
.col-sm-6
h3
| Dropdown
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Base
li.breadcrumb-item.active Dropdown
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12.col-xl-12
.card
.card-header
h5 Basic Dropdown
.card-body.dropdown-basic
.dropdown
button.dropbtn.btn-primary(type='button')
| Dropdown Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
.col-sm-12.col-xl-12
.card
.card-header
h5 Basic Color Dropdown
.card-body.dropdown-basic
.dropdown
.btn-group.mb-0
button.dropbtn.btn-primary(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-secondary(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-success(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-info(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-warning.txt-dark(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-danger(type='button')
| Action
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.col-sm-12.col-xl-12
.card
.card-header
h5 Dropdown Split Button
.card-body.dropdown-basic
.btn-group
button.btn.btn-primary(type='button') Primary Button
.dropdown.separated-btn
button.btn.btn-primary(type='button')
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
.btn-group
button.btn.btn-secondary(type='button') Secondary Button
.dropdown.separated-btn
button.btn.btn-secondary(type='button')
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
.btn-group
button.btn.btn-success(type='button') Success Button
.dropdown.separated-btn
button.btn.btn-success(type='button')
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
.btn-group
button.btn.btn-info(type='button') Info Button
.dropdown.separated-btn
button.btn.btn-info(type='button')
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
.btn-group
button.btn.btn-warning(type='button') Warning Button
.dropdown.separated-btn
button.btn.btn-warning(type='button')
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
.btn-group
button.btn.btn-danger(type='button') Danger Button
.dropdown.separated-btn
button.btn.btn-danger(type='button')
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
.col-sm-12.col-xl-12
.card
.card-header
h5 Rounded Dropdown
.card-body.dropdown-basic
.dropdown
.btn-group.mb-0
button.dropbtn.btn-primary.btn-round(type='button')
| Primary Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-secondary.btn-round(type='button')
| Secondary Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-success.btn-round(type='button')
| Success Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-info.btn-round(type='button')
| Info Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-warning.txt-dark.btn-round(type='button')
| Warning Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.dropdown
.btn-group.mb-0
button.dropbtn.btn-danger.btn-round(type='button')
| Danger Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Action
a(href='#') Another Action
a(href='#') Something Else Here
a(href='#') Separated Link
.col-sm-12.col-xl-6
.card
.card-header
h5 Dropdown With Divider
span
| Use a class
.card-body.dropdown-basic
.dropdown
button.dropbtn.btn-primary(type='button')
| Dropdown Button
span
i.icofont.icofont-arrow-down
.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
a(href='#') Link 3
a(href='#') Another Link
.col-sm-12.col-xl-6
.card
.card-header
h5 Dropdown With Header
span
| Use a class
code .dropdown-header
.card-body.dropdown-basic
.dropdown
button.dropbtn.btn-primary(type='button')
| Dropdown Button
span
i.icofont.icofont-arrow-down
.dropdown-content
h5.dropdown-header Dropdown header
a(href='#') Link 1
a(href='#') Link 2
h5.dropdown-header Dropdown header
a(href='#') Another Link
.col-sm-12.col-xl-6
.card
.card-header
h5 Dropdown With Disable
span
| Use a class
code .dropdown-disabled
.card-body.dropup-basic.dropdown-basic
.dropup.dropdown
button.dropbtn.btn-primary(type='button')
| Dropdown Button
span
i.icofont.icofont-arrow-up
.dropup-content.dropdown-content
a(href='#') Normal
a.active(href='#') Active
a.disabled(href='#') Disabled
.col-sm-12.col-xl-6
.card
.card-header
h5 Dropdown With DropUp
span
| Use a class
code .drop-up
.card-body.dropup-basic.dropdown-basic
.dropup.dropdown
button.dropbtn.btn-primary(type='button')
| Dropdown Button
span
i.icofont.icofont-arrow-up
.dropup-content.dropdown-content
a(href='#') Link 1
a(href='#') Link 2
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files