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

Property	Description
home	Optional. Logo component
pages	Optional. An array of objects with name and link, or name and children properties. If children is specified it is an array of objects with name and link properties
access	Optional. Access component for login, registration, etc.
anchor	Optional. Function with an anchor component
overlap	Optional. Whether the header should overlap the content and be invisible
currentPath	Required for SSR only. Used only for server-side rendering (SSR) instead of window.location.pathname

Example

The use of react-header-responsive in a real project can be seen here.

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.