Required Installations:

• Place the following scripts near the end of your page to use the required frameworks :

Credit: Online tutorials web

Required:

To use this package properly, please create a css file in the source folder of your website and add the following css content to it :

• { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }

:root { --clr: #222327; }

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--clr); }

.navigation { width: 400px; height: 70px; background: #fff; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; }

.navigation ul { display: flex; width: 350px; }

.navigation ul li { position: relative; list-style: none; width: 70px; height: 70px; z-index: 1; }

.navigation ul li a { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; text-align: center; font-weight: 500; }

.navigation ul li a .icon { position: relative; display: block; line-height: 75px; font-size: 1.5rem; text-align: center; color: var(--clr); }

.navigation ul li.active a .icon { transform: translateY(-35px); transition: 0.5s; }

.navigation ul li a .text { position: absolute; color: var(--clr); font-weight: 400; letter-spacing: 0.05em; transition: 0.5s; opacity: 0; transform: translateY(20px); }

.navigation ul li.active a .text { opacity: 1; transform: translateY(10px); }

.indicator { position: absolute; top: -50%; width: 70px; height: 70px; background: #29fd53; border-radius: 50%; border: 6px solid var(--clr); transition: 0.5s; }

.indicator::before { content: ""; position: absolute; top: 50%; left: -22px; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 1px -10px 0 0 var(--clr); }

.indicator::after { content: ""; position: absolute; top: 50%; right: -22px; width: 20px; height: 20px; background: transparent; border-top-left-radius: 20px; box-shadow: 0px -10px 0 0 var(--clr); }

.navigation ul li:nth-child(2).active ~ .indicator { transform: translateX(calc(70px * 1)); }

.navigation ul li:nth-child(3).active ~ .indicator { transform: translateX(calc(70px * 2)); }

.navigation ul li:nth-child(4).active ~ .indicator { transform: translateX(calc(70px * 3)); }

.navigation ul li:nth-child(5).active ~ .indicator { transform: translateX(calc(70px * 4)); } "