{"id":16603144,"url":"https://github.com/laserpants/impromptu-react-animated-header","last_synced_at":"2025-10-29T15:30:49.092Z","repository":{"id":34561507,"uuid":"38507103","full_name":"laserpants/impromptu-react-animated-header","owner":"laserpants","description":"Responsive nav header component for React.","archived":false,"fork":false,"pushed_at":"2018-02-15T20:31:38.000Z","size":357,"stargazers_count":10,"open_issues_count":2,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T02:11:47.662Z","etag":null,"topics":["nav","react"],"latest_commit_sha":null,"homepage":"http://laserpants.github.io/impromptu-react-animated-header/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laserpants.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-03T19:11:26.000Z","updated_at":"2021-01-21T11:19:08.000Z","dependencies_parsed_at":"2022-08-26T23:01:55.655Z","dependency_job_id":null,"html_url":"https://github.com/laserpants/impromptu-react-animated-header","commit_stats":null,"previous_names":["johanneshilden/impromptu-react-animated-header"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Fimpromptu-react-animated-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Fimpromptu-react-animated-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Fimpromptu-react-animated-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Fimpromptu-react-animated-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laserpants","download_url":"https://codeload.github.com/laserpants/impromptu-react-animated-header/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238840757,"owners_count":19539608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nav","react"],"created_at":"2024-10-12T00:47:43.808Z","updated_at":"2025-10-29T15:30:48.472Z","avatar_url":"https://github.com/laserpants.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Impromptu React Animated Header\n\nA responsive nav header component for React.\n\n![animation](animation.gif)\n\nTry before you browserify: http://laserpants.github.io/impromptu-react-animated-header/\n\n## Installation\n\nNpm is the recommended install method.\n\n```bash\n$ npm install impromptu-react-animated-header\n```\n\nCopy CSS files and icons to a suitable location. \n\n```bash\n$ cp -r node_modules/impromptu-react-animated-header/css/ node_modules/impromptu-react-animated-header/icons/ .\n```\n\n## How to use\n\n* Include the module.\n\n```\nvar TopMenu   = require('impromptu-react-animated-header').TopMenu;\nvar MenuItem  = require('impromptu-react-animated-header').MenuItem;\nvar MenuBrand = require('impromptu-react-animated-header').MenuBrand;\n```\n\n* Lay out the menu using the `\u003cTopMenu\u003e` and `\u003cMenuItem\u003e` components. An optional `\u003cMenuBrand\u003e` can be included prior to the menu items.\n\n```\n\u003cTopMenu\u003e\n    \u003cMenuBrand\u003e\n        \u003ca href=\"#home\"\u003eNavigation\u003c/a\u003e\n    \u003c/MenuBrand\u003e\n    \u003cMenuItem\u003e\n        \u003ca href=\"#home\"\u003eHome\u003c/a\u003e\n    \u003c/MenuItem\u003e\n    \u003cMenuItem\u003e\n        \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\n    \u003c/MenuItem\u003e\n    \u003cMenuItem\u003e\n        \u003ca href=\"#configuration\"\u003eConfiguration\u003c/a\u003e\n    \u003c/MenuItem\u003e\n    \u003cMenuItem\u003e\n        \u003ca href=\"#contribute\"\u003eContribute\u003c/a\u003e\n    \u003c/MenuItem\u003e\n \u003c/TopMenu\u003e\n```\n\n#### Full working example\n\nIn this example, we create the menu component in `main.js`.\n\n```javascript\nvar React     = require('react');\nvar TopMenu   = require('impromptu-react-animated-header').TopMenu;\nvar MenuItem  = require('impromptu-react-animated-header').MenuItem;\nvar MenuBrand = require('impromptu-react-animated-header').MenuBrand;\n\nvar MyMenu = React.createClass({\n    render: function() {\n        return (\n            \u003cTopMenu\u003e\n                \u003cMenuBrand\u003e\n                    \u003ca href=\"#home\"\u003eNavigation\u003c/a\u003e\n                \u003c/MenuBrand\u003e\n                \u003cMenuItem\u003e\n                    \u003ca href=\"#home\"\u003eHome\u003c/a\u003e\n                \u003c/MenuItem\u003e\n                \u003cMenuItem\u003e\n                    \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\n                \u003c/MenuItem\u003e\n                \u003cMenuItem\u003e\n                    \u003ca href=\"#configuration\"\u003eConfiguration\u003c/a\u003e\n                \u003c/MenuItem\u003e\n                \u003cMenuItem\u003e\n                    \u003ca href=\"#contribute\"\u003eContribute\u003c/a\u003e\n                \u003c/MenuItem\u003e\n             \u003c/TopMenu\u003e\n        );\n    }\n});\n\nReact.render(\n    \u003cMyMenu /\u003e,\n    document.getElementById('anchor')\n);\n```\n\nMake sure `index.html` includes `impromptu-header.min.css`.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003ctitle\u003eReact Impromptu Animated Header\u003c/title\u003e\n    \u003clink href=\"css/impromptu-header.min.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"anchor\"\u003e\u003c/div\u003e\n    \u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nBuild the example, e.g., using Browserify:\n\n```bash\n$ browserify -t reactify main.js -o bundle.js \n```\n\n## Styling\n\nThe 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.\n\n```html\n\u003clink href=\"//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"css/impromptu-header.min.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"//fonts.googleapis.com/css?family=Lato:300,400,700,900\" rel=\"stylesheet\"\u003e\n\u003cstyle type=\"text/css\" rel=\"stylesheet\"\u003e\n    body { \n        font-family: \"Lato\", sans-serif; \n    }\n    header {\n        background-color: #4eb1ba;         /* Nav background color */\n    }\n    .nav-collapse.nav-compact a {\n        background-color: #3ea1aa;         /* Background of drop-down in collapsed mode */\n    }\n    .nav-collapse.nav-full ul, \n    .nav-collapse.nav-full a {\n        border-color: #5ec1ca !important;  /* Divider lines */\n    }\n    .nav-collapse.nav-compact a {\n        border-color: #4eb1ba !important;  /* Horizontal divider in collapsed menu */\n    }\n    .nav-collapse a:active,\n    .nav-collapse .active a {\n        background-color: #5ec1ca;         /* Active state background color */\n    }\n\u003c/style\u003e\n```\n\nThe 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.\n\n## Props\n\n`TopMenu` supports a number of props:\n\n| Property         | Type                     | Description   | Default      | \n| ---------------- | ------------------------ | ------------- | ------------ |\n| `align`          | 'left'\u0026nbsp;\u0026vert;\u0026nbsp;'right'         | Horizontal alignment of the menu. | 'left'\n| `brandAlign`     | 'left'\u0026nbsp;\u0026vert;\u0026nbsp;'right'         | Position of the logo, if one is used. | 'left'\n| `autoClose`      | Boolean                  | Controls whether the menu should automatically close when an item is clicked.      | true      |\n| `threshold`      |  Number                  | Collapse breakpoint: A viewport width less than this value will cause the navbar to collapse (in pixels). | 769    |\n| `cssTransitions` |  Boolean                 | Apply CSS classes for transitions? (See [examples](http://laserpants.github.io/impromptu-react-animated-header/public/default.html)) | false  |\n| `animate`        |  Boolean                 | Animate opening and closing of the menu in collapsed mode? | true   |\n| `duration`       |  Number                  | Duration of the anmation, in milliseconds. | 300    |\n\n## Contribute\n\nFork, submit pull requests or report any issues: https://github.com/laserpants/impromptu-react-animated-header\n\n## License\n\nImpromptu React Animated Header is provided under the BSD License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaserpants%2Fimpromptu-react-animated-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaserpants%2Fimpromptu-react-animated-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaserpants%2Fimpromptu-react-animated-header/lists"}