Display list item all around an image to create a "circle" menu

In my website I'd like to create something like a circle navbar that should go around my user avatar. I'm using ul and li to create the various option that I need. Is there a way to position all my navItem around my avatar starting from the bottom half of it? The final result should looks like this:

this is my .jsx file:

const Profile = () => {
 const { currentUser } = useContext(AuthContext);

 return (
   <div className="profile">
     <ul className="navMenu">
       <div className="avatarContainer">
         <img
           src="https://w7.pngwing.com/pngs/81/570/png-transparent-profile-logo-computer-icons-user-user-blue-heroes-logo-thumbnail.png"
           alt=""
           className="avatarPic"
         />
       </div>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
       <li className="navItem">
         <EmailIcon className="navIcon" />
         <span className="navText">Email</span>
       </li>
     </ul>
   </div>
 );
};

export default Profile;

and my scss one:

.profile {
 @include themify($themes) {
   background-color: themed("bgSoft");
   text-align: center;
   height: 100%;

   .avatarContainer {
     width: 100%;
     height: 120px;
     position: relative;
     margin-top: 90px;

     .avatarPic {
       width: 200px;
       height: 200px;
       border-radius: 50%;
       object-fit: cover;
       position: absolute;
       left: 0;
       right: 0;
       margin: auto;
       top: 20px;
     }
   }

   .navMenu {
     list-style-type: none;
   }

   .navItem {
     width: 95px;
     height: 95px;
     border: solid 2px black;
     border-radius: 50%;
     display: flex; /* Add flexbox properties */
     justify-content: center;
     align-items: center;

     transition: transform 0.3s ease; /* Add transition property */

     .navIcon {
       font-size: 3.5rem;
     }

     &:hover {
       transform: scale(1.1); /* Increase the dimension by 10% */

       .navText {
         opacity: 1; /* Show the text */
       }
     }

     .navText {
       position: absolute;
       bottom: -20px; /* Adjust the distance from the icon */
       font-size: 1rem;
       opacity: 0; /* Hide the text initially */
       transition: opacity 0.3s ease; /* Add transition property */
     }
   }
 }
}

Right now I've all my navItem on the left of the avatar and I don't know how to move them around it. I'd also like to make them appear one by one when the page load so I'd need to put an animation for each one of the navItem, but I've no idea on how do so.

I thought of three-four ways that it could possibly be done:

• absolute positioning
• either absolute positioning or grid layout and translate for positioning
• intricate grid layout and grid-area for positioning

Since I enjoy a challenge, I went ahead and produced working models that can be fine-tuned. (I realized that the repeating "Email" item is just for illustration, so I only appended a number for distinguishment.)

Absolute positioning

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ul {
  position: relative;
  width: 200px;
  margin: auto;
  padding: 0;
}

li {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: yellowgreen;
  border-radius: 50%;
}

li:nth-of-type(1) {
  width: 200px;
  height: 200px;
}
li:nth-of-type(2) {
  left: -115px;
  top: 90px;
}
li:nth-of-type(3) {
  left: -60px;
  top: 190px;
}
li:nth-of-type(4) {
  left: 50px;
  top: 225px;
}
li:nth-of-type(5) {
  left: 160px;
  top: 190px;
}
li:nth-of-type(6) {
  left: 220px;
  top: 90px;
}

<!-- language: lang-html -->

<ul class="navMenu">
 <li class="avatarContainer">
     Avatar
 </li>
 <li class="navItem">
   <span class="navText">Email 1</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 2</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 3</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 4</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 5</span>
 </li>
</ul>

<!-- end snippet -->

absolute positioning and translate for positioning

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ul {
  position: relative;
  width: 200px;
  margin: auto;
  padding: 0;
}

li {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: yellowgreen;
  border-radius: 50%;
}

li:nth-of-type(1) {
  width: 200px;
  height: 200px;
}
li:nth-of-type(2) {
  translate: -115px 90px;
}
li:nth-of-type(3) {
  translate: -60px 190px;
}
li:nth-of-type(4) {
  translate: 50px 225px;
}
li:nth-of-type(5) {
  translate: 160px 190px;
}
li:nth-of-type(6) {
  translate: 220px 90px;
}
  </style>

<!-- language: lang-html -->

<ul class="navMenu">
 <li class="avatarContainer">
     Avatar
 </li>
 <li class="navItem">
   <span class="navText">Email 1</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 2</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 3</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 4</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 5</span>
 </li>
</ul>

<!-- end snippet -->

grid layout and translate for positioning

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ul {
  display: grid;
  width: 200px;
  margin: auto;
  padding: 0;
}

li {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: yellowgreen;
  border-radius: 50%;
}

li:nth-of-type(1) {
  width: 200px;
  height: 200px;
}
li:nth-of-type(2) {
  translate: -115px 90px;
}
li:nth-of-type(3) {
  translate: -60px 190px;
}
li:nth-of-type(4) {
  translate: 50px 225px;
}
li:nth-of-type(5) {
  translate: 160px 190px;
}
li:nth-of-type(6) {
  translate: 220px 90px;
}

<!-- language: lang-html -->

<ul class="navMenu">
 <li class="avatarContainer">
     Avatar
 </li>
 <li class="navItem">
   <span class="navText">Email 1</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 2</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 3</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 4</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 5</span>
 </li>
</ul>

<!-- end snippet -->

intricate grid layout and grid-area for positioning

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ul {
  display: grid;
  grid-template-columns: repeat(18, 25px);
  grid-template-rows: repeat(13, 25px);
  width: 450px;
  margin: auto;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  background-color: yellowgreen;
  border-radius: 50%;
}

li:nth-of-type(1) {
  grid-area: 1/6;
  width: 200px;
  height: 200px;
}
li:nth-of-type(2) {
  grid-area: 4/1;
}
li:nth-of-type(3) {
  grid-area: 8/3;
}
li:nth-of-type(4) {
  grid-area: 10/8;
}
li:nth-of-type(5) {
  grid-area: 8/13;
}
li:nth-of-type(6) {
  grid-area: 4/15;
}

<!-- language: lang-html -->

<ul class="navMenu">
 <li class="avatarContainer">
     Avatar
 </li>
 <li class="navItem">
   <span class="navText">Email 1</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 2</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 3</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 4</span>
 </li>
 <li class="navItem">
   <span class="navText">Email 5</span>
 </li>
</ul>

<!-- end snippet -->