# fa-header > This component provides standard header layout and functionality. Latest version **1.4.0** (published 2018-08-17) · ISC license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install fa-header pnpm add fa-header yarn add fa-header bun add fa-header ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.4.0 | | Published | 2018-08-17 | | First published | 2017-05-15 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 16 | | Unpacked size | 36.5 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Future Activities | | Maintainers | paul.blundell | ## Links - npm: https://www.npmjs.com/package/fa-header - Repository: https://github.com/FutureActivities/Vuejs-Fa-Header - Homepage: https://github.com/FutureActivities/vuejs-fa-header#readme - Issues: https://github.com/FutureActivities/vuejs-fa-header/issues - npm.io page: https://npm.io/package/fa-header ## Dependencies (16) - [gulp](https://npm.io/package/gulp.md) ^3.9.1 - [envify](https://npm.io/package/envify.md) ^4.0.0 - [vueify](https://npm.io/package/vueify.md) ^9.4.0 - [babelify](https://npm.io/package/babelify.md) ^7.3.0 - [node-sass](https://npm.io/package/node-sass.md) ^4.5.0 - [babel-core](https://npm.io/package/babel-core.md) ^6.23.1 - [browserify](https://npm.io/package/browserify.md) ^14.1.0 - [gulp-uglify](https://npm.io/package/gulp-uglify.md) ^2.0.1 - [vue-awesome](https://npm.io/package/vue-awesome.md) ^2.1.0 - [vinyl-buffer](https://npm.io/package/vinyl-buffer.md) ^1.0.0 - [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.23.0 - [v-media-query](https://npm.io/package/v-media-query.md) ^1.0.3 - [browserify-shim](https://npm.io/package/browserify-shim.md) ^3.8.13 - [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.22.0 - [vinyl-source-stream](https://npm.io/package/vinyl-source-stream.md) ^1.1.0 - [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0 ## Recent versions - 1.4.0 (latest) — 2018-08-17 - 1.3.15 — 2018-08-13 - 1.3.14 — 2018-06-28 - 1.3.13 — 2018-06-28 - 1.3.12 — 2018-04-17 - 1.3.11 — 2018-04-06 - 1.3.10 — 2018-03-28 - 1.3.9 — 2018-03-08 - 1.3.8 — 2018-03-06 - 1.3.7 — 2018-03-06 - 1.3.6 — 2018-03-06 - 1.3.5 — 2018-03-06 - 1.3.4 — 2018-02-20 - 1.3.3 — 2018-02-09 - 1.3.2 — 2017-12-05 - … 39 more at https://npm.io/package/fa-header/versions ## README # Vue.js Header Components This component provides typical header layout and functionality for responsive websites. ## Demo https://jsfiddle.net/du7pzdgs/2/ ## Getting Started CDN: https://unpkg.com/fa-header NPM: import FaHeader from 'fa-header' Vue.use(FaHeader) To use specific components: import FaHeader from 'fa-header/src/components/Header.vue' import FaNavigation from 'fa-header/src/components/Navigation.vue' import FaSearch from 'fa-header/src/components/Search.vue' new Vue({ el: '#header', components: { FaHeader, FaNavigation, FaSearch } }); ## Components ### Header This provides a wrapper for everything in the header that will become sticky at the specified point. #### Example Usage
#### Options | Prop | Description | Type | Default | |------------|-----------------------------------------------------------------------------------------------------------------|--------|---------| | breakpoint | When does the class `header--desktop` get applied | Number | 1024 | | sticky | The point of when the header becomes sticky / adds the class `header--sticky`. To disable set the value to -1. | Number | -1 | #### Classes | Class | Description | |--|--| | header--desktop | Applied when screen resolution is greater or equal to the breakpoint prop value. | | header--sticky | Applied if the header element has reached the top of the screen inc offset set by the sticky prop. | ## Navigation This will display as normal on desktop but on mobile will move everything contained within it to a menu that scrolls in from the side. #### Example Usage #### Options | Prop | Description | Type | Default | |--|--|--|--| | breakpoint | When does the class `nav--desktop` get applied. | Number | 1024 | | burgersticky | Optionally show the burger menu when the `header--sticky` class is applied. | Boolean | false | #### Classes | Class | Description | |--|--| | nav--desktop | Applied when screen resolution is greater or equal to the breakpoint prop value. | | nav--burgersticky | Applied if the burgersticky prop value is set to true. | | nav--show | Applied when the burger menu is opened. | #### Slots | Name | Description | |--|--| | icon | Optionally set the icon content. By default a :before element will be applied with a FontAwesome icon, if using this slot you may want to hide that :before pseudo element with CSS. | ## Search This will display as normal on desktop but on mobile will be replaced by a search icon which when clicked will open the contents in an absolutely positioned container. #### Example usage
#### Options | Prop | Description | Type | Default | |--|--|--|--| | breakpoint | When does the class `search--desktop` get applied. | Number | 1024 | | iconsticky | Optionally show the search icon when the `header--sticky` class is applied. | Boolean | false | #### Classes | Class | Description | |--|--| | search--desktop | Applied when screen resolution is greater or equal to the breakpoint prop value. | | search--iconsticky | Applied if the iconsticky prop value is set to true. | | search--show | Applied when the search icon is clicked. | #### Slots | Name | Description | |--|--| | icon | Optionally set the icon content. By default a :before element will be applied with a FontAwesome icon, if using this slot you may want to hide that :before pseudo element with CSS. | ## MegaMenu Moved to: https://github.com/FutureActivities/Vuejs-Menu --- _Source: https://npm.io/package/fa-header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._