react-header-responsive v1.1.2

react-header-responsive

A responsive header menu for React applications with submenu support

Features

• Menu & Submenu
• Desktop version
• Mobile version
• Tablet support
• Current link highlighting
• Custom anchor component support
• Server-side rendering (SSR) support
• Overlapping (display invisible header over content)

Installation

npm install react-header-responsive

Usage

Example

import Header from 'react-header-responsive';
import logo from './rhr-logo.png';

function App() {
  const pages = [
    {
      name: 'About',
      link: '/about',
    },
    {
      name: 'Products',
      children: [
        {
          name: 'Product-1',
          link: '/product1',
        },
        {
          name: 'Product-2',
          link: '/product2',
        },
        {
          name: 'Product-3',
          link: '/product3',
        },
      ],
    },
    {
      name: 'Pricing',
      link: '/pricing',
    },
  ];

  const Access = () => {
    return (
      <div>
        <button>Sign Up</button>
        <button>Sign In</button>
      </div>
    );
  };

  return (
    <>
      <Header
        home={<img src={logo} alt="RHR logo" />}
        pages={pages}
        anchor={(link, name, className) => (
          <Link href={link} className={className}>
            {name}
          </Link>
        )}
        access={<Access />}
        overlap
      />
    </>
  );
}

Contributing

1. Clone repo.
2. Create / checkout feature/{name}, or fix/{name} branch.
3. Install deps: npm.
4. Make your changes.
5. Commit: git commit.
6. Push: git push.
7. Open PR targeting the main branch.