0.1.6 • Published 5 years ago

react-prio-nav v0.1.6

Weekly downloads
-
License
MIT
Repository
github
Last release
5 years ago

React PrioNav

The Priority+ Navigation Pattern as a React component.

npm Flow GitHub

PrioNav is a menu component that only shows what fits on the screen and automatically hides the rest under a dropdown menu. Responsive and easy to style.

Demo

Resize your browser window to see it in action.


Installation

npm install react-prio-nav

Requires React 16.6+.

Usage

Just pass your individual menu items as children to <PrioNav>.

import PrioNav from 'react-prio-nav'
// ...
<PrioNav className="Navigation">
  <a href="/">Home</a>
  <a href="/">Menu Item 2</a>
  <a href="/">Menu Item 3</a>
  <a href="/">Menu Item 4</a>
  <a href="/">Menu Item 5</a>
  <a href="/">Menu Item 6</a>
  <a href="/">Menu Item 7</a>
</PrioNav>

Styling

This extends the default CSS which is a flexbox based nav.

/* menu wrapper */
.Navigation {
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
  max-width: 75vw;
}

/* menu items */
.Navigation nav > * {
  color: salmon;
  height: 3rem;
  line-height: 3rem;
  padding: 0 1rem;
}

.Navigation nav > *:hover,
.Navigation nav > *:active,
.Navigation nav > *:focus {
  border-bottom: 3px solid indianred;
  color: indianred;
  outline: none;
}

.Navigation button {
  /* ... */
}

.Navigation button:hover,
.Navigation button:focus {
  /* ... */
}

/* dropdown */
.Navigation nav:nth-of-type(2) {
  background-color: rgba(255, 255, 255, 0.85);
}

More details on available props is coming soon.


Disclaimer

Still to be considered an unstable beta. Manual tests with latest Chromium and Firefox on linux seems to be working as expected for me. I'm willing to work on any issue that might turn up. Feel free to come with suggestions and help out with any issues.


Todo

  • Add render props for button and dropdown for more customisability. I'm thinking both looks and animation.
  • Write proper tests.
  • Clean up the code, make it more readable, spellcheck?
  • Better Flow types where possible.
  • More...
0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago