Introduction
- Fully responsive header
- Full keyboard navigation
- Built in Accessibility
- Higher order components to change the behaviour of the header
- Ability to customize as needed
Using library
To use this library download the the library from github and either use the source or the bundled versions present in the dist version. Inside the dist folder both the scritp and style files are present.
Once downloaded the library the components can be imported and used as below:-
import React from 'react';
import {render} from 'react-dom';
import ReactHeader from "react-header";
const Logo = ReactHeader.Logo;
const NavigationList = ReactHeader.NavigationList;
const NavigationItem = ReactHeader.NavigationItem;
const Header = ReactHeader.Header;
Basic Usage
Components
To use the header the pretty straightfoward. The component needs to be wrapped inside a Header.- Logo: Any Logo that needs to be provided is put under the Logo element.
- NavigationList: Any menu, including any submenu is created using NavigationList element.
- NavigationItem: All items inside menu is a created using NavigationItem element.
- NavigationItem can have link and text attributes which is used for creating a link
- NavigationItem supports nested NavigationList, which creates Sub Menus
- Any other items can be added to the menu and will be displayed as it is.
Example
Link to actual example is : Basic Example
Basic Usage using the above components are given below:-
const header = (
<Header>
<Logo title="My Logo" link="http://testing.com"/>
<NavigationList>
<NavigationItem link="#home" text="Home"/>
<NavigationItem text="Team">
<NavigationList>
<NavigationItem link="#local" text="Local"/>
<NavigationItem link="#" text="Remote"/>
<NavigationItem link="#" text="Desktop"/>
<NavigationItem link="#" text="Train"/>
</NavigationList>
</NavigationItem>
<NavigationItem link="#contact" text="Contact"/>
<NavigationItem link="#" text="About Us"/>
</NavigationList>
<input type="search" placeholder="Search..."/>
</Header>
)
render(header, document.getElementById('header'));
Styling Header
There are multiple ways to style headers:-
- _variables.scss contains the colours used to create the headers and it can be overriden to to provide a new theme for the header.
- Classes can be passed as className to components and they can be used to styled the components.
- Same as classes, styles can be passed to the components and they will be respected
Example - Overriding Variables
Link to actual example is : Styling Example
You can look at the _variables.scss and define the new values for for the variables present in the file.
/**
* Header overides
*/
$header-height: 80px;
// background color for header
$header-bg-color: #f1f0f0;
// Default color for header components
$header-font-color: #66757f;
@import "override-variables";
@import "{path-to-react-header-styles}/main";
// Other styles
Sticky Headers
There are couple of Higher order components which can be used to change the default behaviour of the Headers.
- StickyHeader: This header can be used to make a header which is fixed to the top
- StickyOnScrollUpHeader: This header can be used to create a header which appears only on scroll up, but disappears as we scroll down
Example
Link to actual example is : Sticky on Scroll Header Example
import {render} from 'react-dom';
import React from 'react';
import Logo from './Logo.js';
import NavigationList from './navigation/NavigationList';
import NavigationItem from './navigation/NavigationItem';
import StickyOnScrollUpHeader from './header/StickyOnScrollUpHeader.js'
const header = (
<StickyOnScrollUpHeader>
<Logo title="My Logo" link="http://testing.com" />
<NavigationList>
<NavigationItem link="#home" text="Home"/>
<NavigationItem text="Team">
<NavigationItem link="#contact" text="Contact"/>
<NavigationItem link="#" text="About Us"/>
</NavigationList>
</StickyOnScrollUpHeader>
);
render(header, document.getElementById('header'));
