How to Create Scrollable Horizontal Menu using CSS ?

Last Updated : 16 Dec, 2021

In this article, we are going to implement a Scrollable Horizontal Menu using CSS.

Approach: Scrollable Horizontal Menu is used to scroll the horizontal navbar using CSS “overflow:auto” and “white-space: nowrap”. These two attributes are used to scroll the horizontal menu.

To implement the scrollable horizontal menu

You have to add HTML.
You have to add CSS to the code.

Example: In the below example, we have used CSS properties “overflow : auto” and “white-space : nowrap”.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <style> 
        div.scrollmenu { 
          background-color: #333; 
          overflow: auto; 
          white-space: nowrap; 
        } 
  
        div.scrollmenu a { 
          display: inline-block; 
          color: white; 
          text-align: center; 
          padding: 14px; 
          text-decoration: none; 
        } 
  
        div.scrollmenu a:hover { 
          background-color: #777; 
        } 
    </style> 
</head> 
<body> 
    <center> 
       <h1 style="color:green">GeeksforGeeks</h1> 
    </center> 
    <h2>Horizontal Scrollable Menu</h2> 
    <div class="scrollmenu"> 
      <a href="#home">Home</a> 
      <a href="#news">News</a> 
      <a href="#contact">Contact</a> 
      <a href="#about">About</a> 
      <a href="#support">Support</a> 
      <a href="#blog">Blog</a> 
      <a href="#tools">Tools</a>   
      <a href="#base">Base</a> 
      <a href="#custom">Custom</a> 
      <a href="#more">More</a> 
      <a href="#logo">Logo</a> 
      <a href="#friends">Friends</a> 
      <a href="#partners">Partners</a> 
      <a href="#people">People</a> 
      <a href="#work">Work</a> 
    </div> 
</body> 
</html> 