A Beautiful React Site Navigation Script Inspired by Stripe.com


Category: React React Navigation & Menu | July 19, 2021
Author:yusinto
Official Page:Go to website
Last Update:July 19, 2021
License:MIT

react-site-nav navigation

Description:

Are you searching for a perfect site navigation for your project, which can give you the flexibility to create various types of navigation for your ReactJs project? Then, you are at the right place. I’m sharing with you a beautiful React site navigation script which is inspired by stripe.com, that will be helpful for you.

Features:

  • Beautiful animations
  • Automatic view-port detection and correction so fly-outs never get rendered off screen
  • Completely customizable
  • Powered by CSS grid and animations and styled components

How to use it?

1. Install the library with yarn like this.

yarn add react-site-nav

2. In step 2, you will need to import the component.

import SiteNav, {ContentGroup} from 'react-site-nav';

3. Now, create the beautiful site navigation in React. Like following:

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>
  );