What is this triangular part of a sidebar menu called?

See attachment

I’ve circled it in red. What is the design name of this element?


Some people call it an arrow or a caret that enables a slide-out of content or a popup can display some sort of information. In this particular instance it would appear it is for the navigation. Since you tagged this with CSS I included an example of how to create it:

.arrow_box {
    position: relative;
    background: #b34ae5;
.arrow_box:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(179, 74, 229, 0);
    border-left-color: #b34ae5;
    border-width: 30px;
    margin-top: -30px;

Caret question in regards to Boorstrap that might help you: “How is the caret on Twitter Bootstrap constructed?

Source : Link , Question Author : Bilal , Answer Author : Community

Leave a Comment