Skip to content

Instantly share code, notes, and snippets.

@JacobKnaack JacobKnaack/header.js Secret
Last active May 15, 2019

Embed
What would you like to do?
Gatsby Agency Portfolio Header Navigation Component
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import { Navbar, Nav } from "rsuite"
const Header = ({ siteTitle }) => (
<Navbar style={{
width: '100vw',
position: 'fixed',
}}>
<Navbar.Header>
<h1>
<Link to="/">
{siteTitle}
</Link>
</h1>
</Navbar.Header>
<Navbar.Body>
<Nav>
<Nav.Item componentClass={Link} to="/#work">
Work
</Nav.Item>
<Nav.Item componentClass={Link} to="/#projects">
Projects
</Nav.Item>
<Nav.Item componentClass={Link} to="/#about">
About
</Nav.Item>
<Nav.Item componentClass={Link} to="/#contact">
Contact
</Nav.Item>
</Nav>
</Navbar.Body>
</Navbar>
)
Header.propTypes = {
siteTitle: PropTypes.string,
}
Header.defaultProps = {
siteTitle: ``,
}
export default Header
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.