Created a Curved Mobile Magic Navigation Menu in Breakdance
Bouncy navigation bars on mobile are great ways of attracting and retaining users on your website. We can easily add one to our site built with Breakdance
Justin Gluska
Updated November 29, 2022
cool navigation bar with css in breakdance builder
Reading Time: 5 minutes
You can find navigation bars on almost any website. But if you're looking to stand out from the crowd, why not try a curved magic navigation menu? It's eye-catching and stylish, perfect for adding a little pizzazz to your site design. With just a few easy steps in Breakdance, you can have a professional-looking curved magic navigation menu that your visitors won't soon forget.
In just a few minutes, we'll go over adding the footer template, customizing your section and div elements, and adding the custom code to display your footer. Let's go!
Creating a mobile-only Menu in Breakdance
The first step is going to be adding a new footer template to your site. Ensure the settings are set to "everywhere" and keep other settings as default. Once you're in the editor, setup your structure pane with a section, div, and code block.
Set your section width to full & remove all padding (in spacing). This will stretch out the element so it takes up the entire width of your screen, allowing your mobile menu to expand across the bottom of a phone screen. Also, in the settings page, you'll want to hide the entire section on all breakpoints that aren't mobile. The menu bar doesn't make sense to have on a desktop (unless you tweak it to do so)
Adding Styling & Code
Your div isn't going to have any specific settings inside of it except for a class. We're going to use the div as a parent element to the code block which will have the menu inside of it. In the advanced settings of your div, go to advanced and add a class called navigation (.navigation). Click the little pencil edit icon to open the selector settings. We've added a class as it can be moved from element to element (if you wanted to customize anything). Scroll down to Custom CSS and paste the following code inside. This will set all of the design and styling elements of our navigation bar. We'll add the actual bar and javascript in a little bit.
/* This goes inside the .navigation custom CSS box */
%%SELECTOR%% {
position: fixed;
bottom: 0px;
width: 100%;
height: 60px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
%%SELECTOR%% ul
{
display: flex;
width: 100%;
bottom: 0;
}
%%SELECTOR%% ul li
{
list-style: none;
position: relative;
/* 350 / 5 = 70 */
width: 70px;
height: 60px;
z-index: 2;
}
%%SELECTOR%% ul li a
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
}
%%SELECTOR%% ul li a .icon
{
position: relative;
display: block;
line-height: 65px;
font-size: 1.5em;
width: 55px;
height: 55px;
border-radius: 50%;
transition: 0.5s;
transition-delay: 0s;
color: #222327;
}
%%SELECTOR%% ul li.active a .icon
{
transform: translateY(-27px);
color: #fff;
transition-delay: 0.25s;
background: var(--clr);
}
%%SELECTOR%% ul li a .icon::before
{
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
transition-delay: 0s;
border-radius: 50%;
background: var(--clr);
filter: blur(5px);
opacity: 0;
}
%%SELECTOR%% ul li.active a .icon::before
{
transition-delay: 0.5s;
opacity: 0.5;
}
%%SELECTOR%% ul li:nth-child(1).active ~ .indicator
{
transform: translateX(calc(67px * 0));
}
%%SELECTOR%% ul li:nth-child(2).active ~ .indicator
{
transform: translateX(calc(67px * 1));
}
%%SELECTOR%% ul li:nth-child(3).active ~ .indicator
{
transform: translateX(calc(67px * 2));
}
%%SELECTOR%% ul li:nth-child(4).active ~ .indicator
{
transform: translateX(calc(67px * 3));
}
%%SELECTOR%% ul li:nth-child(5).active ~ .indicator
{
transform: translateX(calc(67px * 4));
}Now time for the actual bar! Go ahead and add a code block inside the div and set the wrapper to 100% so the block expands across the entire div. We'll add HTML (in the PHP block) and JavaScript (in the JavaScript block). The HTML is going to add the menu bar physically to our page as an unorganized list (bulleted list). With the styling we previously added it will turn into the beautiful menu bar. The JavaScript will show you which link is selected. You can have the menu bar either go to different places across the same page or each button goes to completely different pages
<ul>
<li class="list active">
<a href="#">
<span class="icon" style="--clr:#f44336;">
<ion-icon name="home-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#ffa117;">
<ion-icon name="person-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#0fc70f;">
<ion-icon name="chatbubble-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#2196f3;">
<ion-icon name="camera-outline"></ion-icon>
</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon" style="--clr:#b145e9;">
<ion-icon name="settings-outline"></ion-icon>
</span>
</a>
</li>
<div class="indicator"></div>
</ul>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>const list = document.querySelectorAll('.list');
function activeLink(){
list.forEach((item) =>
item.classList.remove('active'));
this.classList.add('active')
}
list.forEach((item) =>
item.addEventListener('click',activeLink));And that's it! Now you have a menu bar that looks great, is animated, and looks wonderful across all mobile devices. Within a few minutes you'll be able to attract more visitors and make your page look more user-friendly. Hope this tutorial helped and if you have any questions leave a comment below!
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
