extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/dropdowns/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Buttons'},
      'Dropdowns'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/components/dropdowns/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Single button
        .card-body
          p.text-body-secondary.small
            | Each single 
            code .btn
            |  can be changed into a dropdown toggle with small changes. Here’s how you can put them to work with either 
            code 
              = '<button>'
            |  elements:
          +example('https://coreui.io/docs/components/dropdowns/#single-button')
            .dropdown
              button#dropdownMenuButton.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropdown button
              ul.dropdown-menu(aria-labelledby='dropdownMenuButton1')
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
          p.text-body-secondary.small
            | And with 
            code 
              = '<a>'
            |  elements:
          +example('https://coreui.io/docs/components/dropdowns/#single-button')
            .dropdown
              a#dropdownMenuLink.btn.btn-secondary.dropdown-toggle(href='#' role='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropdown link
              ul.dropdown-menu(aria-labelledby='dropdownMenuLink')
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
          p.text-body-secondary.small The best part is you can do this with any button variant, too:
          +example('https://coreui.io/docs/components/dropdowns/#single-button')
            .btn-group
              button.btn.btn-primary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Primary
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Secondary
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-success.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Success
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-info.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Info
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-warning.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Warning
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-danger.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false') Danger
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Split button
        .card-body
          p.text-body-secondary.small
            | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of 
            code .dropdown-toggle-split
            |  for proper spacing around the dropdown caret.
          p.text-body-secondary.small
            | We use this extra class to reduce the horizontal 
            code padding
            |  on either side of the caret by 25% and remove the 
            code margin-left
            |  that’s attached for normal button dropdowns. Those additional changes hold the caret centered in the split button and implement a more properly sized hit area next to the main button.
          +example('https://coreui.io/docs/components/dropdowns/#split-button')
            .btn-group
              button.btn.btn-primary(type='button') Primary
              button.btn.btn-primary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-secondary(type='button') Secondary
              button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-success(type='button') Success
              button.btn.btn-success.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-info(type='button') Info
              button.btn.btn-info.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-warning(type='button') Warning
              button.btn.btn-warning.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-danger(type='button') Danger
              button.btn.btn-danger.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Sizing
        .card-body
          p.text-body-secondary.small
            | Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
          +example('https://coreui.io/docs/components/dropdowns/#sizing')
            .btn-group
              button.btn.btn-secondary.btn-lg.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Large button
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-lg.btn-secondary(type='button') Large split button
              button.btn.btn-lg.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
          +example('https://coreui.io/docs/components/dropdowns/#sizing')
            .btn-group
              button.btn.btn-secondary.btn-sm.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Small button
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              button.btn.btn-sm.btn-secondary(type='button') Small split button
              button.btn.btn-sm.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Dark dropdowns
        .card-body
          p.text-body-secondary.small
            | Opt into darker dropdowns to match a dark navbar or custom style by adding 
            code .dropdown-menu-dark
            |  onto an existing 
            code .dropdown-menu
            | . No changes are required to the dropdown items.
          +example('https://coreui.io/docs/components/dropdowns/#dark-dropdowns')
            .dropdown
              button#dropdownMenuButton2.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropdown button
              ul.dropdown-menu.dropdown-menu-dark(aria-labelledby='dropdownMenuButton2')
                li
                  a.dropdown-item.active(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
          p.text-body-secondary.small And putting it to use in a navbar:
          +example('https://coreui.io/docs/components/dropdowns/#dark-dropdowns')
            nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
              .container-fluid
                a.navbar-brand(href='#') Navbar
                button.navbar-toggler(type='button' data-coreui-toggle='collapse' data-coreui-target='#navbarNavDarkDropdown' aria-controls='navbarNavDarkDropdown' aria-expanded='false' aria-label='Toggle navigation')
                  span.navbar-toggler-icon
                #navbarNavDarkDropdown.collapse.navbar-collapse
                  ul.navbar-nav
                    li.nav-item.dropdown
                      a#navbarDarkDropdownMenuLink.nav-link.dropdown-toggle(href='#' role='button' data-coreui-toggle='dropdown' aria-expanded='false')
                        | Dropdown
                      ul.dropdown-menu.dropdown-menu-dark(aria-labelledby='navbarDarkDropdownMenuLink')
                        li
                          a.dropdown-item(href='#') Action
                        li
                          a.dropdown-item(href='#') Another action
                        li
                          a.dropdown-item(href='#') Something else here
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Dropup
        .card-body
          p.text-body-secondary.small
            | Trigger dropdown menus above elements by adding 
            code .dropup
            |  to the parent element.
          +example('https://coreui.io/docs/components/dropdowns/#dropup')
            .btn-group.dropup
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropup
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group.dropup
              button.btn.btn-secondary(type='button')
                | Split dropup
              button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Dropright
        .card-body
          p.text-body-secondary.small
            | Trigger dropdown menus at the right of the elements by adding 
            code .dropend
            |  to the parent element.
          +example('https://coreui.io/docs/components/dropdowns/#dropright')
            .btn-group.dropend
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropright
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group.dropend
              button.btn.btn-secondary(type='button')
                | Split dropend
              button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                span.visually-hidden Toggle Dropright
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Dropleft
        .card-body
          p.text-body-secondary.small
            | Trigger dropdown menus at the left of the elements by adding 
            code .dropstart
            |  to the parent element.
          +example('https://coreui.io/docs/components/dropdowns/#dropleft')
            .btn-group.dropstart
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropleft
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
                li
                  a.dropdown-item(href='#') Something else here
                li
                  hr.dropdown-divider
                li
                  a.dropdown-item(href='#') Separated link
            .btn-group
              .btn-group.dropstart(role='group')
                button.btn.btn-secondary.dropdown-toggle.dropdown-toggle-split(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                  span.visually-hidden Toggle Dropleft
                ul.dropdown-menu
                  li
                    a.dropdown-item(href='#') Action
                  li
                    a.dropdown-item(href='#') Another action
                  li
                    a.dropdown-item(href='#') Something else here
                  li
                    hr.dropdown-divider
                  li
                    a.dropdown-item(href='#') Separated link
              button.btn.btn-secondary(type='button')
                | Split dropstart
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Menu items
        .card-body
          p.text-body-secondary.small
            | Historically dropdown menu contents 
            em had
            |  to be links, but that’s no longer the case with v4. Now you can optionally use 
            code 
              = '<button>'
            |  elements in your dropdowns instead of just 
            code 
              = '<a>'
            | s.
          +example('https://coreui.io/docs/components/dropdowns/#menu-items')
            .dropdown
              button#dropdownMenu2.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropdown
              ul.dropdown-menu(aria-labelledby='dropdownMenu2')
                li
                  button.dropdown-item(type='button') Action
                li
                  button.dropdown-item(type='button') Another action
                li
                  button.dropdown-item(type='button') Something else here
          p.text-body-secondary.small
            | You can also create non-interactive dropdown items with 
            code .dropdown-item-text
            | . Feel free to style further with custom CSS or text utilities.
          +example('https://coreui.io/docs/components/dropdowns/#menu-items')
            ul.dropdown-menu
              li
                span.dropdown-item-text Dropdown item text
              li
                a.dropdown-item(href='#') Action
              li
                a.dropdown-item(href='#') Another action
              li
                a.dropdown-item(href='#') Something else here
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Active
        .card-body
          p.text-body-secondary.small
            | Add 
            code .active
            |  to items in the dropdown to 
            strong style them as active
            | . To convey the active state to assistive technologies, use the 
            code aria-current
            |  attribute — using the 
            code page
            |  value for the current page, or 
            code true
            |  for the current item in a set.
          +example('https://coreui.io/docs/components/dropdowns/#active')
            ul.dropdown-menu
              li
                a.dropdown-item(href='#') Regular link
              li
                a.dropdown-item.active(href='#' aria-current='true') Active link
              li
                a.dropdown-item(href='#') Another link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Disabled
        .card-body
          p.text-body-secondary.small
            | Add 
            code .disabled
            |  to items in the dropdown to 
            strong style them as disabled
            | .
          +example('https://coreui.io/docs/components/dropdowns/#disabled')
            ul.dropdown-menu
              li
                a.dropdown-item(href='#') Regular link
              li
                a.dropdown-item.disabled(href='#' tabindex='-1' aria-disabled='true') Disabled link
              li
                a.dropdown-item(href='#') Another link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Menu alignment
        .card-body
          p.text-body-secondary.small
            | By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add 
            code .dropdown-menu-end
            |  to a 
            code .dropdown-menu
            |  to right align the dropdown menu.
          +example('https://coreui.io/docs/components/dropdowns/#menu-alignment')
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Right-aligned menu example
              ul.dropdown-menu.dropdown-menu-end
                li
                  button.dropdown-item(type='button') Action
                li
                  button.dropdown-item(type='button') Another action
                li
                  button.dropdown-item(type='button') Something else here
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Responsive alignment
        .card-body
          p.text-body-secondary.small
            | If you want to use responsive alignment, disable dynamic positioning by adding the 
            code data-coreui-display="static"
            |  attribute and use the responsive variation classes.
          p.text-body-secondary.small
            | To align 
            strong right
            |  the dropdown menu with the given breakpoint or larger, add 
            code .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
            | .
          +example('https://coreui.io/docs/components/dropdowns/#responsive-alignment')
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' data-coreui-display='static' aria-expanded='false')
                | Left-aligned but right aligned when large screen
              ul.dropdown-menu.dropdown-menu-lg-end
                li
                  button.dropdown-item(type='button') Action
                li
                  button.dropdown-item(type='button') Another action
                li
                  button.dropdown-item(type='button') Something else here
          +example('https://coreui.io/docs/components/dropdowns/#responsive-alignment')
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' data-coreui-display='static' aria-expanded='false')
                | Right-aligned but left aligned when large screen
              ul.dropdown-menu.dropdown-menu-end.dropdown-menu-lg-start
                li
                  button.dropdown-item(type='button') Action
                li
                  button.dropdown-item(type='button') Another action
                li
                  button.dropdown-item(type='button') Something else here
          +example('https://coreui.io/docs/components/dropdowns/#responsive-alignment')
            .btn-group
              button#dropdownMenuButton.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropdown
              ul.dropdown-menu(aria-labelledby='dropdownMenuButton')
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Right-aligned menu
              ul.dropdown-menu.dropdown-menu-end
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' data-coreui-display='static' aria-expanded='false')
                | Left-aligned, right-aligned lg
              ul.dropdown-menu.dropdown-menu-lg-end
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
            .btn-group
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' data-coreui-display='static' aria-expanded='false')
                | Right-aligned, left-aligned lg
              ul.dropdown-menu.dropdown-menu-end.dropdown-menu-lg-start
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
            .btn-group.dropstart
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropstart
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
            .btn-group.dropend
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropend
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
            .btn-group.dropup
              button.btn.btn-secondary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                | Dropup
              ul.dropdown-menu
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
                li
                  a.dropdown-item(href='#') Menu item
      .col-12
        .card.mb-4
          .card-header
            strong Dropdown
            span.small.ms-1 Headers
          .card-body
            p.text-body-secondary.small Add a header to label sections of actions in any dropdown menu.
            +example('https://coreui.io/docs/components/dropdowns/#headers')
              ul.dropdown-menu
                li
                  h6.dropdown-header Dropdown header
                li
                  a.dropdown-item(href='#') Action
                li
                  a.dropdown-item(href='#') Another action
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Dividers
        .card-body
          p.text-body-secondary.small Separate groups of related menu items with a divider.
          +example('https://coreui.io/docs/components/dropdowns/#dividers')
            ul.dropdown-menu
              li
                a.dropdown-item(href='#') Action
              li
                a.dropdown-item(href='#') Another action
              li
                a.dropdown-item(href='#') Something else here
              li
                hr.dropdown-divider
              li
                a.dropdown-item(href='#') Separated link
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Text
        .card-body
          p.text-body-secondary.small
            | Place any freeform text within a dropdown menu with text and use 
            a(href='https://coreui.io/docs/utilities/spacing/') spacing utilities
            | . Note that you’ll likely need additional sizing styles to constrain the menu width.
          +example('https://coreui.io/docs/components/dropdowns/#text')
            .dropdown-menu.p-4.text-body-secondary(style='max-width: 200px;')
              p
                | Some example text that's free-flowing within the dropdown menu.
              p.mb-0
                | And this is more example text.
    .col-12
      .card.mb-4
        .card-header
          strong Dropdown
          span.small.ms-1 Forms
        .card-body
          p.text-body-secondary.small
            | Put a form within a dropdown menu, or make it into a dropdown menu, and use 
            a(href='https://coreui.io/docs/utilities/spacing/') margin or padding utilities
            |  to give it the negative space you require.
          +example('https://coreui.io/docs/components/dropdowns/#forms')
            .dropdown-menu
              form.px-4.py-3
                .mb-3
                  label.form-label(for='exampleDropdownFormEmail1') Email address
                  input#exampleDropdownFormEmail1.form-control(type='email' placeholder='email@example.com')
                .mb-3
                  label.form-label(for='exampleDropdownFormPassword1') Password
                  input#exampleDropdownFormPassword1.form-control(type='password' placeholder='Password')
                .mb-3
                  .form-check
                    input#dropdownCheck.form-check-input(type='checkbox')
                    label.form-check-label(for='dropdownCheck')
                      | Remember me
                button.btn.btn-primary(type='submit') Sign in
              .dropdown-divider
              a.dropdown-item(href='#') New around here? Sign up
              a.dropdown-item(href='#') Forgot password?
          +example('https://coreui.io/docs/components/dropdowns/#forms')
            form.dropdown-menu.p-4
              .mb-3
                label.form-label(for='exampleDropdownFormEmail2') Email address
                input#exampleDropdownFormEmail2.form-control(type='email' placeholder='email@example.com')
              .mb-3
                label.form-label(for='exampleDropdownFormPassword2') Password
                input#exampleDropdownFormPassword2.form-control(type='password' placeholder='Password')
              .mb-3
                .form-check
                  input#dropdownCheck2.form-check-input(type='checkbox')
                  label.form-check-label(for='dropdownCheck2')
                    | Remember me
              button.btn.btn-primary(type='submit') Sign in