CSS Layout

GitHub 0★

<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;
                    }

Menu

See also

Dot leader

Mega menu

Nested dropdowns

Property list

Split navigation