Introducing react-site-nav: a beautiful site navigation bar powered by styled components an…

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

:tada:

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 () =>
  (
    

      {/* 2. Add SiteNav with ContentGroup as children */}
      
        
          {/* 3. You can add anything in a ContentGroup */}
          

            {/* react router link! */}
            
My Story
            
Another list item
          
        
        
          Free text followed by some links.

          Email

          Github
        
      
      
        
        
      
    
  );

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”.

    { /* These will render as flyouts */}
    ...
    ...
  

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:

  {
    /* You can render anything here! */
  }
  

【阅读原文...】