Wix Studio Tutorial: How to create a sidebar navigation

Опубликовано: 31 Март 2026
на канале: Created By Bailey

2,564

Hello, Welcome to my YouTube channel. In this video I will show you how to create a sidebar navigation on Wix Studio. If you have any questions, please ask them down below.

Find me on X (Twitter) / createdbybailey

The code used in this video:

.anchor-menu__item {
position: relative;
margin-bottom: 1rem;
padding-left: 32px;
}

.anchor-menu__item::after {
content: '';
width: 100%;
height: 4px;
background-color: #000;
border-radius: 8px;
position: absolute;
left: 0;
bottom: -8px;
scale: 0 1;
transform-origin: right;
transition: scale 0.4s ease-in-out;
}

.anchor-menu__item[aria-current]::after {
scale: 1 1;
transform-origin: left;
}

.anchor-menu__item::before {
content: '';
height: 28px;
width: 28px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-repeat: no-repeat;
background-size: cover;
}

.anchor-menu__item:nth-child(1)::before {
background-image: url('https://static.wixstatic.com/shapes/1...
}
.anchor-menu__item:nth-child(2)::before {
background-image: url('https://static.wixstatic.com/shapes/1...
}
.anchor-menu__item:nth-child(3)::before {
background-image: url('https://static.wixstatic.com/shapes/1...
}
.anchor-menu__item:nth-child(4)::before {
background-image: url('https://static.wixstatic.com/shapes/1...
}

.anchor-menu__item[aria-current] .anchor-menu__label {
font-weight: bold;
}

.sidebar {
position: fixed;
top: 30px;
left: 0;
z-index: 999999;
}