Logo BRUTOPIA
  • Menu
  • Intallation
  • Components
    • Accordion
    • Alert
    • Badge
    • Breadcrumb
    • Button
    • Card
    • Carousel
    • Collapse
    • Dropdown
    • List Group
    • Modal
    • Navs
    • Pagination
    • Progress
    • Spinner
    • Toasts
    • Tooltip
    • Avatar
    • Divider
  • Forms & Tables
  • Form Elements
    • Input
    • Input Group
    • Select
    • Radio
    • Checkbox
    • Textarea
  • Form Layout
  • Table
  • Neo-Brutalism
  • Github
  • Bootstrap
  • Buy me a coffee

Dropdown

Multi-purpose dropdown component with tons of variations.

Basic

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3

Split Dropdowns

To create a split button add class .dropdown-toggle-split with your dropdown toggle class and to add divider between dropdown item use class .doprdown-divider

Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link
Header
Option 1 Option 2 Option 3
Separated link

Dropdown with Icons & Emoji

Use .dropdown-item-emoji within .dropdown-item for font-size and spacing of emojis.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
😆 Option 1 😎 Option 2 🤩 Option 3

Directions

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu. Trigger dropdown menus at the up / right / left of the elements by adding .dropup | .dropright | .dropleft to the parent element.

Header
Option 1 Option 2 Option 3
Header
Option 1 Option 2 Option 3
Header
Option 2 Option 2 Option 3
Header
Option 1 Option 2 Option 3

Sizes

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3

Options

Use data-offset or data-reference attributes to change the location of the dropdown.

Action Another action Something else here
Action Another action Something else here
Separated link

Variations

To create a dropdown with groups you can use .dropdown-header for the header of groups and for separation of group you can use .dropdown-divider.

To create a dropdown with icons use class .dropdown-icon-wrapper with .dropdown.

Group 1
Option 1 Option 2
Group 2
Option 1 Option 2
Group 3
Option 1 Option 2
New around here? Sign up Forgot password?

2023 © Your Company

Desinged with by RajNandan