Gold Penguin Logo with Text

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
Updated December 1, 2022
cool navigation bar with css in breakdance builder
cool navigation bar with css in breakdance builder

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 monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Justin Gluska
Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!
Subscribe
Notify of
guest

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross