A React component modeling the official Overwatch website side-navigation
APACHE-2.0 License
A React component modeling the Official Overwatch website side-navigation.
npm install --save overwatch-side-nav
This font is used by Activision Blizzard for much of Overwatch's design. For this component to match the Overwatch design, including the font is required. It can be licensed from MyFonts.
When using CSS font-face, the font-family should match whats below:
font-family: 'Futura No 2 D DemiBold';
Check out example/index.js for working example or below for exact usage.
import SideNav from 'overwatch-side-nav'
import SVG_MATERIAL_CHEVRON from 'svg-icon/dist/svg/material/chevron-left.svg'
const items = [
{
label: 'Home',
id: 'top',
icon: SVG_MATERIAL_CHEVRON,
},
{
label: 'Highlights',
id: 'potg',
icon: SVG_MATERIAL_CHEVRON,
},
{
label: 'Settings',
id: 'settings',
icon: SVG_MATERIAL_CHEVRON,
},
]
class Example extends React.Component {
render() {
return <SideNav
items={items}
/>
}
}
name | required | type | default | desc |
---|---|---|---|---|
items | X |
array | null | Array of objects, with required keys id , label , and icon
|
Β item.label | X |
string | null | Label for the navigation item, displayed in uppercase |
Β item.id | X |
string | null | HTML id for the navigation item. The item will be shown as active when id is same as window.location.hash
|
Β item.icon | X |
<svg> |
null | Icon for the navigation, positioned to the left of the label. Must be a valid SVG |
defaultColor | string | #323C50 | Background color for navigation items that aren't active. Should visually contrast textColor
|
|
activeColor | string | #FFFFFF | Background color for the active navigation item | |
textColor | string | #00C3FF | Color for the navigation items' label and the fill color for the icon SVG |
|
zIndex | number | 1000000 | CSS z-index for the navigation. Used with position: fixed , to float SideNav above (or below) the page |
npm run dev
Install it:
cd example/; npm install
Run it while developing (in another terminal window):
cd example/; npm run dev
Open http://localhost:8080/ to see the running example
npm test
Made with π by Chris Dolphin
The font Futura No 2 D DemiBold should be licensed through MyFonts.com