Open In App
Related Articles

How to Create Scrollable Horizontal Menu using CSS ?

Improve Article
Save Article
Like Article

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

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

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


<!DOCTYPE html>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
        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;
       <h1 style="color:green">GeeksforGeeks</h1>
    <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>


Scrollable Horizontal Menu

Last Updated : 16 Dec, 2021
Like Article
Save Article
Similar Reads
Related Tutorials