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.
