@ryexley/boxelder

React Priority+ Nav Menu

This is (yet another) React implemention of the Priority+ navigation menu pattern [1]. The logic for this implementation was heavily adapted from this CodePen by Matt Walker. The built-in hamburger menu toggle implementation is an adaptation of this CodePen by Elijah Manor.

Installation

npm install @ryexley/boxelder

or

yarn add @ryexley/boxelder

Usage

const menuItems = [
  { url: "/#", content: "Home" },
  { url: "/#", content: "About" },
  { url: "/#", content: "Contact Us" }
];

<PriorityPlusNav menuItemData={ menuItems } />

For more examples, see the component styleguide examples.

Development

• Clone the repository and run npm install or yarn install.
• Run npm run dev or yarn run dev to start up the instance of React Styleguidist, and then open your browser to http://localhost:6060.
• Edit as necessary/desired, and let hot module reloading take care of the rest for you.

Git commit messages should conform to the conventional-changelog-eslint format, and will be verified by semantic-release during releases.

---

[1]: More information about this pattern can be found at the following links:

• Michael Scharnagl's blog
• Brad Frost's blog
• CSS Tricks