Create responsive fixed sidebar menu with icons using pure CSS


Author:lucasnr
Official Page:Go to website
Last Update:June 15, 2021
License:MIT

Description:

A light weight and fully responsive fixed sidebar menu with icons using CSS only. Which works perfectly on desktop, tablet and mobile devices. Alternatively, you may checkout our other responsive menu bar collections.

On mouseover event, the menu bar will be shown with animation effects and on mobile device, menu bar will be displayed on the bottom.

How can I use it?

Step 1: Download the plugin by clocking on above ‘Download’ button.

Step 2: Include the sidebar.css file in your page. Like this:

<link rel="stylesheet" href="./assets/css/sidebar.css" />

Or if you already have created a CSS file in your project then, you just need to paste following code into your CSS file.

.sidebar {
	background-color: #333;
	position: fixed;
	transition: width 0.2s ease;
}

.sidebar nav {
	height: 100%;
}

.sidebar .sidebar__nav {
	display: flex;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar .sidebar__nav .sidebar__nav__link {
	align-items: center;
	color: #bbb;
	display: flex;
	padding-left: 20px;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.sidebar .sidebar__nav .sidebar__nav__link:hover {
	background-color: rgba(0, 0, 0, 0.15);
	color: #80f;
}

.sidebar .sidebar__nav .sidebar__nav__text {
	display: none;
	margin-left: 10px;
	margin-right: auto;
	white-space: nowrap;
}

.sidebar .sidebar__nav i {
	align-items: center;
	display: flex;
	justify-content: center;
}

@media (max-width: 572px) {
	.sidebar {
		bottom: 0;
		width: 100%;
	}

	.sidebar .sidebar__nav {
		justify-content: center;
	}

	.sidebar .sidebar__nav .sidebar__nav__link {
		height: 100%;
		padding: 0.75em;
	}

	.sidebar .sidebar__nav i {
		font-size: 2rem;
	}
}

@media (min-width: 572px) {
	.sidebar {
		height: 100vh;
		left: 0;
		width: var(--sidebar-width);
	}

	.sidebar:hover {
		width: 14rem;
	}

	.sidebar .sidebar__nav {
		flex-direction: column;
	}

	.sidebar .sidebar__nav li:last-child {
		margin-top: auto;
	}

	.sidebar .sidebar__nav .sidebar__nav__link {
		padding: 1em;
	}

	.sidebar:hover .sidebar__nav .sidebar__nav__text {
		display: inline;
	}

	.sidebar .sidebar__nav i {
		font-size: 2.5rem;
	}
}

@media (max-height: 434px) {
	.sidebar {
		overflow-y: scroll;
	}
}

Step 3: Now, create your HTML structure like following.

	<aside class="sidebar">
	<nav>
	<ul class="sidebar__nav">
		<li>
			<a href="#" class="sidebar__nav__link">
			<i class="mdi mdi-fingerprint"></i>
			<span class="sidebar__nav__text">Fingerprint</span>
			</a>
		</li>
		<li>
			<a href="#" class="sidebar__nav__link">
				<i class="mdi mdi-credit-card"></i>
					<span class="sidebar__nav__text">Credit card</span>
			</a>
		</li>
		<li>
			<a href="#" class="sidebar__nav__link">
				<i class="mdi mdi-cart"></i>
				<span class="sidebar__nav__text">Shopping cart</span>
			</a>
		</li>
		<li>
			<a href="#" class="sidebar__nav__link">
				<i class="mdi mdi-account-circle"></i>
				<span class="sidebar__nav__text">Account circle</span>
			</a>
		</li>
		<li>
			<a href="#" class="sidebar__nav__link">
				<i class="mdi mdi-camera"></i>
				<span class="sidebar__nav__text">Camera</span>
			</a>
		</li>
		<li>
			<a href="#" class="sidebar__nav__link">
				<i class="mdi mdi-settings"></i>
				<span class="sidebar__nav__text">Settings</span>
			</a>
		</li>
	</ul>
	</nav>
</aside>