react-priority-plus-nav v1.0.3

react-priority-plus-nav

Need a robust React responsive menu for your site? Look no further than the priority plus pattern. The pattern has been well described by Brad Frost and CSS Tricks.

Features

Take a horizontal menu…

…squish it…

…and some more…

…and the menu doesn't break!

• Robust, resposive and acessible navigation.
• Ideal when you don't have control of menu content.
• Overflow switches from default "More" to "Menu" when there's only one menu item left.
• Supports localised "More" and "Menu" labels.
• Tabbing and keyboard menu activation work as you would hope.
• Intelligent wrapping - if there is only one item that can't fit, the previous sibling is also wrapped. Launching a menu for one item isn't a great experience.
• All this and less than 2KB gzipped.

Installation

$ npm i react-priority-plus-nav

Import into your react project:

import PriorityPlusNav from "react-priority-plus-nav";

Import the base styles and then set your custom menu styles. The demo styles should act as a good starting point.

@import "~react-priority-plus-nav/es/ppnav";

Demo

Clone this repo and run npm install && npm start on your localhost to see it in action.

Parameters

menuItems

Array of menu item objects. If you override renderMenuItem below, you can set any custom properties in here.

{
  uri: "", // path
  label: "", // menu item label
  isActive: true, // indicates the current menu item is active i.e. we're on this page
}

menuText optional

String label for the collapsed menu. Override for localisation purposes.

moreText optional

String label for the overflowed menu. Override for localisation purposes.

className optional

Class to sit at the top level of the rendered <nav> element. Helpful if you want class overrides outside the default cdl-ppnav namespace.

renderMenuItem optional

Override the default menu item render function. You'll want to do this if you're using React Router or similar.

const defaultRenderMenuItem = props => {
  const { itemDetails, captureRef, clickHandler, activeClass } = props;
  const { uri, label, isActive } = itemDetails;

  console.log("rendering");

  return (
    <li className={isActive ? activeClass : ""} key={uri} ref={captureRef} onClick={clickHandler}>
      <a href={uri}>{label}</a>
    </li>
  );
};