impromptu-react-animated-header
Advanced tools
A responsive nav header component for React.
Try before you browserify: http://johanneshilden.github.io/impromptu-react-animated-header/
Npm is the recommended install method.
$ npm install impromptu-react-animated-header
Copy CSS files and icons to a suitable location.
$ cp -r node_modules/impromptu-react-animated-header/css/ node_modules/impromptu-react-animated-header/icons/ .
var TopMenu = require('impromptu-react-animated-header').TopMenu;
var MenuItem = require('impromptu-react-animated-header').MenuItem;
var MenuBrand = require('impromptu-react-animated-header').MenuBrand;
<TopMenu> and <MenuItem> components. An optional <MenuBrand> can be included prior to the menu items.<TopMenu>
<MenuBrand>
<a href="#home">Navigation</a>
</MenuBrand>
<MenuItem>
<a href="#home">Home</a>
</MenuItem>
<MenuItem>
<a href="#about">About</a>
</MenuItem>
<MenuItem>
<a href="#configuration">Configuration</a>
</MenuItem>
<MenuItem>
<a href="#contribute">Contribute</a>
</MenuItem>
</TopMenu>
In this example, we create the menu component in main.js.
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 (
<TopMenu>
<MenuBrand>
<a href="#home">Navigation</a>
</MenuBrand>
<MenuItem>
<a href="#home">Home</a>
</MenuItem>
<MenuItem>
<a href="#about">About</a>
</MenuItem>
<MenuItem>
<a href="#configuration">Configuration</a>
</MenuItem>
<MenuItem>
<a href="#contribute">Contribute</a>
</MenuItem>
</TopMenu>
);
}
});
React.render(
<MyMenu />,
document.getElementById('anchor')
);
Make sure index.html includes impromptu-header.min.css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React Impromptu Animated Header</title>
<link href="css/impromptu-header.min.css" rel="stylesheet">
</head>
<body>
<div id="anchor"></div>
<script src="bundle.js"></script>
</body>
</html>
Build the example, e.g., using Browserify:
$ browserify -t reactify main.js -o bundle.js
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.
<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="css/impromptu-header.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<style type="text/css" rel="stylesheet">
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 */
}
</style>
The examples include a more complete themed version of the navbar, using the theme.css stylesheet.
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) | false |
animate | Boolean | Animate opening and closing of the menu in collapsed mode? | true |
duration | Number | Duration of the anmation, in milliseconds. | 300 |
Fork, submit pull requests or report any issues: https://github.com/johanneshilden/impromptu-react-animated-header
Impromptu React Animated Header is provided under the BSD License.
FAQs
Responsive nav header component for React.
The npm package impromptu-react-animated-header receives a total of 14 weekly downloads. As such, impromptu-react-animated-header popularity was classified as not popular.
We found that impromptu-react-animated-header demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.
Research
/Security News
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.