title: how to give navigation for list in horizontal menu of reactjs
body: <p>Can any one help to get the solution for this question, for page navigation i am using react-horizontal-scrolling-menu. in the reactjs application. Just i want give page navigation where i should give navigation please tell me. this code has giving by the link <a href="https://https://www.npmjs.com/package/react-horizontal-scrolling-menu" rel="nofollow noreferrer">https://https://www.npmjs.com/package/react-horizontal-scrolling-menu</a></p>
  
  <pre><code>    import React, { Component } from 'react';
      import ScrollMenu from 'react-horizontal-scrolling-menu';
      import './App.css';
  
      // list of items
      const list = [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' },
        { name: 'item4' },
        { name: 'item5' },
        { name: 'item6' },
        { name: 'item7' },
        { name: 'item8' },
        { name: 'item9' }
      ];
  
      // One item component
      // selected prop will be passed
      const MenuItem = ({text, selected}) =&gt; {
        return &lt;div
          className={`menu-item ${selected ? 'active' : ''}`}
          &gt;{text}&lt;/div&gt;;
      };
  
      // All items component
      // Important! add unique key
      export const Menu = (list, selected) =&gt;
        list.map(el =&gt; {
          const {name} = el;
  
          return &lt;MenuItem text={name} key={name} selected={selected} /&gt;;
        });
  
  
      const Arrow = ({ text, className }) =&gt; {
        return (
          &lt;div
            className={className}
          &gt;{text}&lt;/div&gt;
        );
      };
  
  
      const ArrowLeft = Arrow({ text: '&lt;', className: 'arrow-prev' });
      const ArrowRight = Arrow({ text: '&gt;', className: 'arrow-next' });
  
      const selected = 'item1';
  
      class App extends Component {
        constructor(props) {
          super(props);
          // call it again if items count changes
          this.menuItems = Menu(list, selected);
        }
  
        state = {
          selected
        };
  
        onSelect = key =&gt; {
          this.setState({ selected: key });
        }
  
  
        render() {
          const { selected } = this.state;
          // Create menu from items
          const menu = this.menuItems;
  
          return (
            &lt;div className="App"&gt;
              &lt;ScrollMenu
                data={menu}
                arrowLeft={ArrowLeft}
                arrowRight={ArrowRight}
                selected={selected}
                onSelect={this.onSelect}
              /&gt;
            &lt;/div&gt;
          );
        }
      }
  'css code start here '
  .menu-item {
    padding: 0 40px;
    margin: 5px 10px;
    user-select: none;
    cursor: pointer;
    border: none;
  }
  .menu-item-wrapper.active {
    border: 1px blue solid;
  }
  .menu-item.active {
    border: 1px green solid;
  }
  
  .scroll-menu-arrow {
    padding: 20px;
    cursor: pointer;
  }
  </code></pre>