Creating a sidebar or lateral menu with CSS is a much more viable solution than many think. Although most examples you'll find online directly resort to JavaScript, for a simple sidebar menu, it's actually not necessary.
With a good combination of positioning, transformations, and pseudo-classes, a clean, functional, and accessible result can be achieved using only HTML and CSS.
In this article, I show you how to create a sidebar menu with only CSS, explaining each technical decision and the reasoning behind it, so that you don't just copy code but understand it and can adapt it to your projects.
What is a sidebar or lateral menu and when to use it
A sidebar or lateral menu is a navigation element typically located on one side of the screen (left or right) that groups links, actions, or secondary sections of a website.
It is usually used when:
- There are many navigation options.
- You don't want to clutter the top bar.
- You need to keep the main content clean.
Difference between a lateral menu and a traditional navigation bar
While a horizontal navigation bar is usually always visible, the lateral menu:
- Can be shown or hidden.
- Makes better use of vertical space.
- Works very well in dashboard-style layouts or web applications.
Why create a sidebar with only CSS
Most tutorials combine HTML + CSS + JavaScript, but that is not always necessary.
In this example, I chose not to use JavaScript because the basic behavior of the menu (showing and hiding) can be perfectly solved with CSS, reducing complexity and dependencies.
Advantages over JavaScript solutions
- Less code and maintenance.
- Better performance in animations.
- You don't depend on JS events for something simple.
- Works even with JS disabled.
Furthermore, when I first tried this approach, I found that for small or demonstrative menus, it is more than enough and much more didactic.
Limitations of a sidebar without JS
However, it's important to be honest:
- You won't be able to handle complex states.
- It is not ideal for menus with advanced logic.
- On mobile devices, hover has limitations.
Later we will see when it is worth using JavaScript.
Basic HTML structure for a lateral menu
We start by defining a simple HTML structure. No unnecessary elements.
<div class="container">
<nav>
<a href=".">Option 1</a>
<a href=".">Option 2</a>
<a href=".">Option 3</a>
<a href=".">Option 4</a>
</nav>
</div> Main Container and Navigation Links
The div.container acts as a visual frame and reference point for the absolute positioning of the sidebar. Inside, the <nav> element contains the navigation links, organized in a column.
Creating the sidebar with CSS step by step
Avoiding horizontal scroll with overflow: One of the first problems I encountered when hiding the menu outside the viewport was unwanted horizontal scroll. To fix this, simply hide the container's overflow.
And for the CSS, we are going to create a container, where to prevent lateral scrolling, we hide the content:
.container {
overflow: hidden;
position: relative;
height: 15em;
max-width: 25em;
margin: auto;
border: 0.2em solid black;
}The simple use of overflow: hidden eliminated any strange lateral scrolling.
Positioning the menu outside the viewport
For the sidebar, it will be a hidden box to the right with a small protrusion to allow positioning over it:
nav {
display: flex;
flex-direction: column;
position: absolute;
right: 100%;
padding: 1em;
background-color: skyblue;
transform: translateX(1em);
transition: 0.2s transform;
}- right: 100% to place it completely outside.
- A small translateX to leave a visible “handle”.
Smooth animations with transform and transition
Instead of moving the menu with left or right, I use transform. This is not accidental.
- transform: translateX() offers smoother animations, as the browser can optimize them better and avoids recalculating the entire layout.
Showing and hiding the menu with hover and focus-within
When positioning over it, we activate the hover effect, in which we shift using CSS translations on the X axis:
nav:hover,
nav:focus-within {
transform: translateX(100%);
}This allows:
- The menu to be shown when hovering the mouse.
- It also works with the keyboard thanks to focus-within.
- Accessibility and keyboard navigation
This is where this approach surpasses many traditional examples. By using focus-within, any user navigating with a keyboard can access the menu without JavaScript, something rarely mentioned in other tutorials.
Complete code for the CSS sidebar
Finally, the complete code so you can test and customize it:
<div class="container">
<nav>
<a href=".">Option 1</a>
<a href=".">Option 2</a>
<a href=".">Option 3</a>
<a href=".">Option 4</a>
</nav>
</div>
<style>
.container {
overflow: hidden;
position: relative;
height: 15em;
max-width: 25em;
margin: auto;
border: 0.2em solid black;
}
nav {
display: flex;
flex-direction: column;
position: absolute;
right: 100%;
padding: 1em;
background-color: skyblue;
transform: translateX(1em);
transition: 0.2s transform;
}
nav:hover,
nav:focus-within {
transform: translateX(100%);
}
a {
white-space: pre;
color: black;
}
p {
font-size: 2em;
text-align: center;
}
</style>Tips for improving and adapting the sidebar
- Responsive and mobile behavior
- On mobile, hover doesn't exist as such. If you need full compatibility:
- You can combine this approach with :checked and a hidden checkbox.
- Or use JS only for mobile devices.
- On mobile, hover doesn't exist as such. If you need full compatibility:
- When it does make sense to use JavaScript
- Using JavaScript is justified when:
- The menu depends on complex states.
- You need persistence (open/close).
- The sidebar controls dynamic content.
Even in those cases, this example is still an excellent foundation.
❓ Quick FAQs
- Can a sidebar be made with only CSS?
- Yes, as long as the behavior is simple.
- Is transform better than left?
- For animations, yes. It's smoother and more efficient.
- Does it work on mobile devices?
- It works, but hover has limitations. It should be adapted.
Conclusion
Creating a sidebar or lateral menu with CSS is perfectly possible without resorting to JavaScript. With good use of position, transform, transition, and pseudo-classes like focus-within, you can build a functional, accessible, and easy-to-maintain menu.
In my case, this approach has served to demonstrate that many simple interactions can be solved with CSS, simplifying the code and improving layout understanding.