How To Create a Laravel Active Menu Sidebar With Scroll Fix
No matter whether you are developing a website or web application software using Laravel, its mandatory to implement an active menu for a website to enhance the user experience. Active menus help users to confirm which page they are on and navigate easily, and feel more comfortable using your website.
If you develop a web software using Laravel you need to make a beautiful sidebar for show software menu, some case our sidebar will be very long this time user can not navigate every menu easily without active menu sidebar, This case you need to implement active menu sidebar with scroll fix then user can very comfort using your software and easily found all of menu.
Today, we will learn how to make a Laravel active menu sidebar with a scroll fix.
A well-designed sidebar menu improves navigation and user experience in Laravel websites and applications. However, many developers struggle with two common issues when developing a website or software menu sidebar:
- Active menu states – The current page’s menu item should stay highlighted.
- Scroll position reset – The sidebar should remember its position after page reloads.
In this guide, I’ll show you how to build a dynamic Laravel sidebar that solves both problems.
Step 1: Setting Up the Sidebar/Menu
First, you need to define the route name in your sidebar. You can use a nested <ul> structure with Front Awesome
This Is For the Resource Route
If your wrote resource route then you need to define route name like this ('sale.*') thats mean it will word with sale.index sale.create sale.edit .
<li class="{{ request()->routeIs('sale.*') ? 'active open' : '' }}">
<a href="javascript:;">
<i class="sidebar-item-icon fa fa-shopping-cart"></i>
<span class="nav-label">Sale</span>
<i class="arrow la la-angle-right"></i>
</a>
<ul class="nav-2-level {{ request()->routeIs('sale.*') ? 'mm-show' : '' }}">
<li><a href="{{ route('sale.create') }}"
class="{{ request()->routeIs('sale.create') ? 'active' : '' }}">Create Sale</a></li>
<li><a href="{{ route('sale.index') }}"
class="{{ request()->routeIs('sale.index') ? 'active' : '' }}">Sale List</a></li>
</ul>
</li>
This Is For the Get Route
<li class="{{ request()->routeIs('setting') || Request::is('databasebackup') ? 'active open' : '' }}">
<a href="javascript:;">
<i class="sidebar-item-icon fa fa-cog"></i>
<span class="nav-label">Settings</span>
<i class="arrow la la-angle-right"></i>
</a>
<ul
class="nav-2-level {{ request()->routeIs('setting') || Request::is('databasebackup') ? 'mm-show' : '' }}">
<li><a href="{{ route('setting') }}"
class="{{ request()->routeIs('setting') ? 'active' : '' }}">Company Settings</a></li>
<li><a href="{{ url('databasebackup') }}"
class="{{ Request::is('databasebackup') ? 'active' : '' }}">Database Backup</a></li>
</ul>
</li>
You need To Write CSS for the active Menu Color And Background Design
<style>
li.active>a {
background: #4646dd;
color: #fff
}
ul.nav-2-level.show {
display: block;
}
.page-sidebar ul li .active {
background: #676793;
color: #fff
}
.sidebar-menu a:focus,
.sidebar-menu a:hover {
color: #fff;
background-color: #4646dd;
}
/* Active state styles */
.sidebar-menu li.active>a {
background: #4646dd !important;
color: #fff !important;
font-weight: 600;
}
.sidebar-menu li.open>a {
background: #3a3d66 !important;
}
.sidebar-menu .nav-2-level li a.active {
background: #676793 !important;
color: #fff !important;
border-left: 3px solid #4646dd;
}
/* Better hover effects */
.sidebar-menu a:hover {
background: #3a3d66 !important;
transition: all 0.3s ease;
}
/* Scrollbar styling */
.sidebar-container::-webkit-scrollbar {
width: 6px;
}
.sidebar-container::-webkit-scrollbar-thumb {
background: #4646dd;
border-radius: 3px;
}
.sidebar-container::-webkit-scrollbar-track {
background: #2b2e4a;
}
</style>
What happened with this JS code
Scroll Preservation: The JavaScript saves the scroll position into browser localStorage before page reload and restores it afterwards
Active State Management: Automatically highlights the current page's menu item
Visual Hierarchy: Improved CSS makes active states more noticeable
Compatibility: Works with standard page loads, Livewire, and TurboLinks
<script>
document.addEventListener('DOMContentLoaded', function() {
// Save scroll position before page reload
window.addEventListener('beforeunload', function() {
localStorage.setItem('sidebarScrollPosition', document.getElementById('sidebar').scrollTop);
});
// Restore scroll position after page load
window.addEventListener('load', function() {
const savedPosition = localStorage.getItem('sidebarScrollPosition');
if (savedPosition) {
document.getElementById('sidebar').scrollTo(0, savedPosition);
localStorage.removeItem('sidebarScrollPosition');
}
// Highlight active menu item
const currentUrl = window.location.href;
const menuLinks = document.querySelectorAll('.sidebar-menu a');
menuLinks.forEach(link => {
if (link.href === currentUrl) {
// Remove active classes from all items first
document.querySelectorAll('.sidebar-menu li').forEach(item => {
item.classList.remove('active', 'open');
});
document.querySelectorAll('.nav-2-level').forEach(submenu => {
submenu.classList.remove('mm-show');
});
// Add active class to current item
let parentLi = link.closest('li');
if (parentLi) {
parentLi.classList.add('active');
// If it's in a submenu, open the parent
const submenu = parentLi.closest('.nav-2-level');
if (submenu) {
submenu.classList.add('mm-show');
const parentMenuItem = submenu.closest('li');
if (parentMenuItem) {
parentMenuItem.classList.add('active', 'open');
}
}
}
}
});
});
});
</script>
Related Post
2025-08-26
(Abdullah)
Best Bangladeshi Domain & Hosting Providers Company (2025 Guide)
aaaa add a terms and conditions code to a website, you can create an HTML block and add the code snippet within it. If the website is built with WordPress, the Custom HTML block can be used to add the embed code. Here are some steps to create and add terms and conditions to a website: Open the website builder and create a new page Name the page something clear, such as "Terms of Service" or "Terms and Conditions