1. Calender
    2. Email
    3. Profile
    4. Widget
    5. Features
    6. UI Elements
    7. Accordion
    8. Alerts
    9. Badges
    10. Button
    11. Dropdown
    12. Images
    13. List Group
    14. Panels
    15. Progressbar
    16. Tab
    17. Wells
    18. Components
    19. Calendar
    20. Carousel
    21. Weather
    22. Datamap
    23. To do
    24. Scrollable
    25. Sweet Alert
    26. Toastr
    27. Basic Range Slider
    28. Advance Range Slider
    29. Nestable
    30. Portlets
    31. Bar Rating
    32. jRate
    33. Table
    34. Basic
    35. Datatable
    36. Datatable Export
    37. Datatable Row Select
    38. Editable
    39. Icons
    40. Themify
    41. Maps
    42. Basic
    43. Vector Map
    44. Form
    45. Basic Form
    46. Miscellaneous
    47. Invoice
    48. Basic
    49. Editable
    50. Pages
    51. Login
    52. Register
    53. Forgot password
    54. Documentation
    55. Logout
    56. 02:34 PM
      Mr. Saifun
      5 members joined today
    57. 02:34 PM
      Mariam
      likes a photo of you
    58. 02:34 PM
      Tasnim
      Hi Teddy, Just wanted to let you ...
    59. 02:34 PM
      Ishrat Jahan
      Hi Teddy, Just wanted to let you ...
    60. See All
    61. 02:34 PM
      Saiul Islam
      Hi Teddy, Just wanted to let you ...
    62. 02:34 PM
      Ishrat Jahan
      Hi Teddy, Just wanted to let you ...
    63. 02:34 PM
      Saiul Islam
      Hi Teddy, Just wanted to let you ...
    64. 02:34 PM
      Ishrat Jahan
      Hi Teddy, Just wanted to let you ...
    65. See All
    66. Saifun
    67. Profile
    68. My Balance
    69. My Task
    70. My Calender
    71. Inbox
    72. Setting
    73. Help
    74. Lock Screen
    75. Logout
    76. Basic Dropdown

      The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

      Dropdown Divider

      The .divider class is used to separate links inside the dropdown menu with a thin horizontal border:

      Dropdown Header

      The .dropdown-header class is used to add headers inside the dropdown menu:

      Disable and Active items

      To disable an item in the dropdown menu, use the .disabled class (gets a light-grey text color and a "no-parking-sign" icon on hover):

      Dropdown Position

      To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:

      Dropup

      If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="j4jfft dropdown" to "dropup":

      Dropdown Accessibility

      To help improve accessibility for people using screen readers, you should include the following role and aria-* attributes, when creating a dropdown menu:

      Dropup

      If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="eir7qe dropdown" to "dropup":