Menu

<div class="menu">
<!-- Normal menu item -->
<div class="menu__item">
...
</div>
<!-- With hot key -->
<div class="menu__item">
<!-- Label -->
...
<!-- Hot key -->
<div class="menu__hotkey">
...
</div>
</div>
<!-- With image and hot key -->
<div class="menu__item">
<!-- Image -->
...
<!-- Label -->
...
<!-- Hot key -->
<div class="menu__hotkey">
...
</div>
</div>
<!-- Divider -->
<div class="menu__divider"></div>
</div>
.menu {
display: flex;
flex-direction: column;
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.menu__item {
/* Center the content horizontally */
align-items: center;
display: flex;
}
.menu__hotkey {
/* Push the hot key to the right */
margin-left: auto;
}
.menu__divider {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 1px;
}
Ctrl + X
Ctrl + C
Ctrl + V

See also

Dot leader

Mega menu

Nested dropdowns

Property list

Split navigation