Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a horizontal scrollable menu with CSS?

CSS Web Development Front End Technology

A horizontal scrollable menu is useful when you have multiple navigation items that may not fit on smaller screens. The key is using overflow: auto and white-space: nowrap to prevent menu items from wrapping to new lines.

Syntax

.container {
    overflow: auto;
    white-space: nowrap;
}

.menu-item {
    display: inline-block;
}

Example

The following example creates a horizontal scrollable navigation menu −

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scrollable Menu</title>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }
    
    nav {
        width: 100%;
        background-color: #272727;
        overflow: auto;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .links {
        display: inline-block;
        text-align: center;
        padding: 14px 20px;
        color: #b289fd;
        text-decoration: none;
        font-size: 17px;
        transition: background-color 0.3s ease;
    }
    
    .links:hover {
        background-color: #646464;
    }
    
    .selected {
        background-color: #00122b;
    }
</style>
</head>
<body>
    <nav>
        <a class="links selected" href="#">Home</a>
        <a class="links" href="#">Login</a>
        <a class="links" href="#">Register</a>
        <a class="links" href="#">Contact Us</a>
        <a class="links" href="#">More Info</a>
        <a class="links" href="#">Our Social Links</a>
        <a class="links" href="#">Visit Us</a>
        <a class="links" href="#">About</a>
        <a class="links" href="#">Services</a>
        <a class="links" href="#">Portfolio</a>
    </nav>
</body>
</html>

Output

A dark horizontal navigation menu appears with purple text links. When the browser window is narrow, a horizontal scrollbar appears allowing users to scroll through menu items that don't fit on screen. The "Home" link has a darker background indicating it's selected, and menu items change to a lighter background on hover.

Key Properties

Property Purpose
overflow: auto Shows scrollbar when content overflows
white-space: nowrap Prevents menu items from wrapping to new lines
display: inline-block Keeps menu items in a horizontal line

Conclusion

Creating a horizontal scrollable menu requires setting overflow: auto and white-space: nowrap on the container, with display: inline-block for menu items. This ensures navigation remains accessible on all screen sizes.

Updated on: 2026-03-15T14:16:23+05:30

765 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements