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
;;; // 1. Do this;; <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:yusinto@gmail.com">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 ="center" /* , , . . */ ="150" ="45" ="#323232" ="#fff" ="18" ="Helvetica, sans-serif" ="#fff" /* */ ="#323232" /* */ ="0" /* */ ="768" /* */ = /* */ > /* 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 ="Products" ="420" ="270" ="https://some/link" /* . */ ="white" /* . */ > /* You can render anything here! */ </ContentGroup>
To render a root item as a link without a ContentGroup, you can do this:
<ContentGroup ="Open Source" ="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 ="Open Source" ="https://github.com/yusinto" ="200"> /* You can render anything here! */ </ContentGroup>
Check the demo in my blog.