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

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.