Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yusinto/react-site-nav
A kick ass site menu powered by styled components inspired by Stripe.
https://github.com/yusinto/react-site-nav
animated-menu bar css-animations menu menu-animation menu-item menu-navigation menubar nav navbar navigate navigation navigation-menus navigationbar navigationview react-site-nav site sitenav sitenavigationelement styled-components
Last synced: 4 days ago
JSON representation
A kick ass site menu powered by styled components inspired by Stripe.
- Host: GitHub
- URL: https://github.com/yusinto/react-site-nav
- Owner: yusinto
- License: mit
- Created: 2018-06-30T11:16:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T22:26:30.000Z (about 2 years ago)
- Last Synced: 2024-04-13T09:15:40.433Z (9 months ago)
- Topics: animated-menu, bar, css-animations, menu, menu-animation, menu-item, menu-navigation, menubar, nav, navbar, navigate, navigation, navigation-menus, navigationbar, navigationview, react-site-nav, site, sitenav, sitenavigationelement, styled-components
- Language: JavaScript
- Homepage:
- Size: 29.9 MB
- Stars: 198
- Watchers: 6
- Forks: 19
- Open Issues: 94
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-site-nav) [](https://www.npmjs.com/package/react-site-nav) [](https://www.npmjs.com/package/react-site-nav) [](https://www.npmjs.com/package/react-site-nav)
> **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
```js
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 () =>
(
{/* 2. Add SiteNav with ContentGroup as children */}
{/* 3. You can add anything in a ContentGroup */}
{/* react router link! */}
- My Story
- Another list item
Free text followed by some links.
Email
Github
);
```
Check the two [examples](https://github.com/yusinto/react-site-nav/tree/master/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".
```jsx
{ /* 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.
```jsx
{
/* You can render anything here! */
}
```
To render a root item as a link without a ContentGroup, you can do this:
```jsx
```
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.
```jsx
{
/* You can render anything here! */
}
```
Check the demo in my [blog](https://reactjunkie.com/).