Need help formatting a drop-down Menu used on a React.jsx

Crystal Rouse
Crystal Rouse used Ask the Experts™
on
I have a React.jsx View that includes a Menu bar at the top of the page.  I need to add a dropdown-menu and would like to use the caret symbol.  
I'm not sure how to add this to the scss file or the react file.

My MenuBar.scss file has:

div.MenuBar {
    background-color: rgba(0, 0, 0, .5);
    color: white;
    line-height: $menuHeight;
    border-radius: 3px;
    border: 2px solid black;

    .MenuOption, .MenuDropdown {
        display: inline-block;
        font-weight: bold;
        cursor: pointer;
        padding: 0 calc(#{$menuHeight} / 2);

        &:hover:not(.NotificationOption) {
            background-color: rgba(0, 0, 0, .75);
        }

        &.MenuOptionRight {
            float: right;
        }

        &.selected {
            color: azure;
            font-style: italic;
            cursor: not-allowed;

            &:hover {
                background-color: transparent;
            }
        }
    }

    .MenuDropdown {
        position: relative;

        & > .options {
            position: absolute;
            top: $menuHeight;
            left: 20px;
            z-index: 9000;
            width: 210px;
            background-color: rgba(0, 0, 0, .75);
            border-radius: 3px;
            border: 2px solid black;

            .MenuOption {
                display: block;
            }
        }
    }
}

My React.js file has:

 _getMenu() {

var tmpOps = [];

        tmpOps.push(
            <MenuOption onClick={() => this.go(this.urls.URLGOESHERE)}
                key="URLLink">
                URL TEXT
                </MenuOption>
        ),

            tmpOps.push(
                <MenuOption onClick={() => this.go(this.urls.LINKGOESHERE)}
                    key="URLLink">
                    ANOTHER LINK
                </MenuOption>
            );

        menuOps.push(
            <MenuOption drop
                options={tmpOps}
                key="KeyText">
                DROPDOWN LINK TEXT
                </MenuOption>
        );

 return menuOps;
    },

Of course there are a lot more links but this snippet shows a drop-down menu that I want to add the additional caret symbol to.  Not sure how to proceed.  I'm really new to React and styling.
I inherited this code.  Thanks for any help!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can create a caret using CSS to make a triangle - which is basically a sneaky use of borders to achieve the desired affect.

This article gives a very good over view of the process
https://css-tricks.com/snippets/css/css-triangle/

Example
HTML
<ul>
  <li> Menu item <i class="caret-down"></i></li>
</ul>

Open in new window

CSS
li {
  display: flex;
}
.caret-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
  margin-top: 7px;
  margin-left: 5px;
}

Open in new window

Working sample here

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial