Contents
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 animationsAutomatic view-port detection and correction so fly-outs never get rendered off screenCompletely customizablePowered 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>
);
The post A Beautiful React Site Navigation Script Inspired by Stripe.com appeared first on Lipku.com.