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 () => ( );
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! */ }
Introducing react-site-nav: a beautiful site navigation bar powered by styled components an...