Circular navigation

<div class="navigation">
    <!-- The trigger element that will show all circles when user clicks it -->
    ...

    <!-- A circle menu item -->
    <div class="navigation__circle">
        <!-- The content -->
        <div class="navigation__content">            
            ...
        </div>
    </div>

    <!-- Repeat menu items -->
    ...
</div>

.navigation {
                        position: relative;
                    }

                    .navigation__circle {
                        /* Position */
                        position: absolute;
                        top: 0;

                        /*
    80px is the distance from the item to the trigger element.
    Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
    in case you want to have a total of 6 menu items.
    The formulation is 360 / numberOfItems * indexOfItem
    */
                        transform: rotate(0deg) translateX(-80px);

                        /* Must have the same size as the trigger element */
                        height: 32px;
                        width: 32px;
                    }

                    .navigation__content {
                        /*
    Rotate it to make it displayed vertically
    Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
    in case you want to have a total of 6 menu items.
    The formulation is -(360 / numberOfItems * indexOfItem)
    */
                        transform: rotate(-0deg);

                        /* Center the content */
                        align-items: center;
                        display: flex;
                        justify-content: center;

                        /* Take full size */
                        height: 100%;
                        width: 100%;
                    }