Adding Tips to Bootstrap 4 Dropdown Menus

Sometimes, dropdown menus just look better when they have tips to reference their opening element. Here's a SCSS snippet I created that gives you tips in Bootstrap 4.

Live Demo

The Code

The SCSS version is below. If you compile it along with Bootstrap, it will use the dropdown's background and border colors defined in variables.scss

However, you can easily convert it to raw CSS by following these steps:

  • Replace $dropdown-bg with white
  • Replace $dropdown-border-color with rgba(0, 0, 0, .15)
[class*="dropdown-menu-tip-"]::after {
  content: '';
  position: absolute;
  width: .5rem;
  height: .5rem;
  background-color: $dropdown-bg;
  border: solid 1px $dropdown-border-color;
  border-bottom: none;
  border-left: none;
}

/* North */
.dropdown-menu-tip-n::after {
  top: calc(-.25rem - 1px);
  left: calc(50% - .25rem);
  transform: rotate(-45deg);
}

/* Northeast */
.dropdown-menu-tip-ne::after {
  top: calc(-.25rem - 1px);
  right: 1rem;
  transform: rotate(-45deg);
}

/* Northwest */
.dropdown-menu-tip-nw::after {
  top: calc(-.25rem - 1px);
  left: 1rem;
  transform: rotate(-45deg);
}

/* South */
.dropdown-menu-tip-s::after {
  left: calc(50% - .25rem);
  bottom: calc(-.25rem - 1px);
  transform: rotate(135deg);
}

/* Southeast */
.dropdown-menu-tip-se::after {
  right: 1rem;
  bottom: calc(-.25rem - 1px);
  transform: rotate(135deg);
}

/* Southwest */
.dropdown-menu-tip-sw::after {
  left: 1rem;
  bottom: calc(-.25rem - 1px);
  transform: rotate(135deg);
}

License

This code has been released into the public domain.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.