https://github.com/laserpants/impromptu-react-animated-header
Responsive nav header component for React.
https://github.com/laserpants/impromptu-react-animated-header
nav react
Last synced: 7 months ago
JSON representation
Responsive nav header component for React.
- Host: GitHub
- URL: https://github.com/laserpants/impromptu-react-animated-header
- Owner: laserpants
- License: other
- Created: 2015-07-03T19:11:26.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-02-15T20:31:38.000Z (about 8 years ago)
- Last Synced: 2025-02-02T02:11:47.662Z (over 1 year ago)
- Topics: nav, react
- Language: JavaScript
- Homepage: http://laserpants.github.io/impromptu-react-animated-header/
- Size: 349 KB
- Stars: 10
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Impromptu React Animated Header
A responsive nav header component for React.
Try before you browserify: http://laserpants.github.io/impromptu-react-animated-header/
## Installation
Npm is the recommended install method.
```bash
$ npm install impromptu-react-animated-header
```
Copy CSS files and icons to a suitable location.
```bash
$ cp -r node_modules/impromptu-react-animated-header/css/ node_modules/impromptu-react-animated-header/icons/ .
```
## How to use
* Include the module.
```
var TopMenu = require('impromptu-react-animated-header').TopMenu;
var MenuItem = require('impromptu-react-animated-header').MenuItem;
var MenuBrand = require('impromptu-react-animated-header').MenuBrand;
```
* Lay out the menu using the `` and `` components. An optional `` can be included prior to the menu items.
```
Navigation
Home
About
Configuration
Contribute
```
#### Full working example
In this example, we create the menu component in `main.js`.
```javascript
var React = require('react');
var TopMenu = require('impromptu-react-animated-header').TopMenu;
var MenuItem = require('impromptu-react-animated-header').MenuItem;
var MenuBrand = require('impromptu-react-animated-header').MenuBrand;
var MyMenu = React.createClass({
render: function() {
return (
Navigation
Home
About
Configuration
Contribute
);
}
});
React.render(
,
document.getElementById('anchor')
);
```
Make sure `index.html` includes `impromptu-header.min.css`.
```html
React Impromptu Animated Header
```
Build the example, e.g., using Browserify:
```bash
$ browserify -t reactify main.js -o bundle.js
```
## Styling
The included stylesheet is pretty rudimentary. Typically, you'd want to, at least, override the default font and align the colors with the rest of your application.
```html
body {
font-family: "Lato", sans-serif;
}
header {
background-color: #4eb1ba; /* Nav background color */
}
.nav-collapse.nav-compact a {
background-color: #3ea1aa; /* Background of drop-down in collapsed mode */
}
.nav-collapse.nav-full ul,
.nav-collapse.nav-full a {
border-color: #5ec1ca !important; /* Divider lines */
}
.nav-collapse.nav-compact a {
border-color: #4eb1ba !important; /* Horizontal divider in collapsed menu */
}
.nav-collapse a:active,
.nav-collapse .active a {
background-color: #5ec1ca; /* Active state background color */
}
```
The examples include a more complete [themed version](http://laserpants.github.io/impromptu-react-animated-header/public/themed.html) of the navbar, using the [theme.css](https://github.com/laserpants/impromptu-react-animated-header/blob/master/public/css/theme.css) stylesheet.
## Props
`TopMenu` supports a number of props:
| Property | Type | Description | Default |
| ---------------- | ------------------------ | ------------- | ------------ |
| `align` | 'left' | 'right' | Horizontal alignment of the menu. | 'left'
| `brandAlign` | 'left' | 'right' | Position of the logo, if one is used. | 'left'
| `autoClose` | Boolean | Controls whether the menu should automatically close when an item is clicked. | true |
| `threshold` | Number | Collapse breakpoint: A viewport width less than this value will cause the navbar to collapse (in pixels). | 769 |
| `cssTransitions` | Boolean | Apply CSS classes for transitions? (See [examples](http://laserpants.github.io/impromptu-react-animated-header/public/default.html)) | false |
| `animate` | Boolean | Animate opening and closing of the menu in collapsed mode? | true |
| `duration` | Number | Duration of the anmation, in milliseconds. | 300 |
## Contribute
Fork, submit pull requests or report any issues: https://github.com/laserpants/impromptu-react-animated-header
## License
Impromptu React Animated Header is provided under the BSD License.