yusinto/react-site-nav

A kick ass site menu powered by styled components inspired by Stripe.

A beautiful site navigation bar to be proud of. Powered by styled components inspired by stripe.com 🎉

Check out the live preview here (powered by now).

Your search for the perfect site navigation bar ends here. Finally a world class navigation bar you can use straight out of the box. Why use this package?

• Beautiful animations
• Automatic viewport detection and correction so flyouts never get rendered off screen
• Completely customisable
• Powered by css grid, css animations and styled components

No more compromises. Welcome to react-site-nav.

Installation

yarn add react-site-nav

Quickstart

import React from 'react';
import {Switch, Link, Route} from 'react-router-dom';
import SiteNav, {ContentGroup} from 'react-site-nav'; // 1. Do this
import Home from './home';
import MyStory from './myStory';

export default () =>
  (
    <div>
      {/* 2. Add SiteNav with ContentGroup as children */}
      <SiteNav>
        <ContentGroup title="About" height="200">
          {/* 3. You can add anything in a ContentGroup */}
          <ul>
            {/* react router link! */}
            <li><Link to="/my-story">My Story</Link></li>
            <li>Another list item</li>
          </ul>
        </ContentGroup>
        <ContentGroup title="Contact" height="200">
          Free text followed by some links.<br/>
          <a href="mailto:[email protected]">Email</a><br/>
          <a href="https://github.com/yusinto">Github</a>
        </ContentGroup>
      </SiteNav>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/my-story" component={MyStory}/>
      </Switch>
    </div>
  );

Check the two examples for a fully working spa with react router, server side rendering and hot reload.

Api

SiteNav

The main react component that represents the site nav. The root container is a css grid so most of the props below maps directly to this grid and should be self-explanatory. Place ContentGroup components as children of SiteNav to render the "flyouts".

  <SiteNav
    align="center" /* center, left, right. This directly maps to justify-content of the root grid. */
    columnWidth="150"
    rowHeight="45"
    background="#323232"
    color="#fff"
    fontSize="18"
    fontFamily="Helvetica, sans-serif"
    contentBackground="#fff" /* Applies to all content groups */
    contentColor="#323232" /* Applies to all content groups */
    contentTop="0" /* Adjusts the distance between ContentGroups and root items */
    breakpoint="768" /* Show site nav at this breakpoint */
    debug={false} /* Keep ContentGroups open to make debugging easier */
  >
    { /* These will render as flyouts */}
    <ContentGroup>...</ContentGroup>
    <ContentGroup>...</ContentGroup>
  </SiteNav>

ContentGroup

Each SiteNav contains ContentGroup children components. Each ContentGroup will be rendered as a "flyout" on hover of the root items. It accepts the following props which are self-explanatory.

  <ContentGroup 
    title="Products" 
    width="420"
    height="270"
    rootUrl="https://some/link" /* Optional. Render root item as a link */
    background="white" /* Optional. Overrides SiteNav contentBackground property */
  >
  {
    /* You can render anything here! */
  }
  </ContentGroup>

To render a root item as a link without a ContentGroup, you can do this:

  <ContentGroup title="Open Source" rootUrl="https://github.com/yusinto" />

By not specifying width and height, SiteNav assumes you just want to render the root item without a ContentGroup. Of course you can have a linked root item plus a ContentGroup. Just specify either a width or a height so SiteNav knows you want to render the group.

  <ContentGroup title="Open Source" rootUrl="https://github.com/yusinto" height="200">
    {
      /* You can render anything here! */
    }
  </ContentGroup>

Check the demo in my blog.

react-site-nav's Issues

how i can have a hover effect to the root element when the dropdown is open.

ContentGroup appearing off to the left

ContentGroup appearing off to the left ... ?

Default Content Width and Height

Hello,

Thank you for this awesome component!

I'm wondering in case we have the following situation:

<ContentGroup title="About">
    <a href="#">Link C</a>
    <a href="#">Link D</a>
</ContentGroup>

See example here:
https://codesandbox.io/s/rlz4q3x2zp

Shouldn't this situation by default get the defaultContentWidth and defaultContentHeight?

I wanted to open a PR for this but I noticed that you have a comment saying:

// if width and height are not specified, that means we don't want to render the content group i.e. we only
// want to render root item

So I'm not sure what this is intended to do. What do you mean by root item?

  memoizeMenuData = memoize((columnWidth, children) => React.Children.map(children, (child, i) => {
    // if width and height are not specified, that means we don't want to render the content group i.e. we only
    // want to render root item
    const {width, height} = child.props;
    let sanitisedWidth, sanitisedHeight;

    if (!width && !height) {
      sanitisedWidth = 0;
      sanitisedHeight = 0;
    } else {
      // if width or height is not specified, add defaults
      sanitisedWidth = width || defaultContentWidth;
      sanitisedHeight = height || defaultContentHeight;
    }

Also is it possible to have a link without a ContentGroup?

 <SiteNav>
    <a href="#">I'm a link without a ContentGroup</a>
    <ContentGroup title="About">
      <a href="#">Link B</a>
      <a href="#">Link C</a>
    </ContentGroup>
    <ContentGroup title="Contact" width="420" height="270">
      <a href="#">Link D</a>
      <a href="#">Link E</a>
    </ContentGroup>
  </SiteNav>

Thanks!

Bug/On different height of the ContentGroup elements

Hello,
I really like this Navbar, but i found a bug, that makes me crazy :)

This Bug can be found as well on your example website here: https://build-licattzisr.now.sh/

When you have like in the example above, different height of ContentGroup, you can see this bug.

When you hover over the smaller one, and go below the last

item there, the ContentGroup will not hide, but you can actually click on invisible

item that belongs to the second ContentGroup, which should be not active.

Maybe making inactive ContentGroup hidden would solve this problem, but let me know if you could fix it, because it would be a pitty to leave it with it :)

Thank you man!

width of the nav must be full screen to show the right dropdown menu

when I apply this lib to my app, found that the position of the dropdown menu is not at the right place, after investigate Ifound that in example, the

element is the width of the screen, with logo on top of it. But in my app, the logo is in the same line with the nav.
so i put the logo and the nav on different z-index to solve this problem.

ContentGroup options?

Hi, I'm trying to use your Nav with 'react-simple-flex-grid, but the positioning goes completely wrong. And I noticed that putting "Static" it returns to normal. How can this be defined?

var MovingDiv = _styledComponents.default.div.withConfig({

';position:static;left:',

Cheers

ContentGroups can be rendered off screen

In some cases where the content group width is large and the viewport is small, the content group is rendered off screen. This is common for the left most or right most content groups. See screenshot below. The solution is to detect the left position of the content group prior to rendering it. If the left position is off screen, move it so that it's just on-screen.

Mobile viewport

Love what's been built here, but it dissappears for mobile view. Any plans for supporting mobile viewports?

ContentGroup appearing off to the left

Thank you for this library! I'm so close to getting it working. I just have one issue: each content group is appearing off to the left for some reason. Here's a screenshot:

See how the dropdown box (ContentGroup) is offset all the way to the left? Any idea why this is happening?

Appreciate your help!

Demo not working (402 - PAYMENT_REQUIRED)

You probably need to change to a new free plan.