diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx
new file mode 100644
index 000000000..538398382
--- /dev/null
+++ b/components/Carousel/Carousel.jsx
@@ -0,0 +1,121 @@
+require('./Carousel.scss')
+import classNames from 'classnames'
+
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+
+import LeftArrowIcon from '../Icons/LeftArrowIcon'
+import RightArrowIcon from '../Icons/RightArrowIcon'
+
+export default class Carousel extends Component {
+ componentWillMount() {
+ this.handleResize = this.handleResize.bind(this)
+ window.addEventListener('resize', this.handleResize)
+ this.handlePageUp = this.handlePageUp.bind(this)
+ this.handlePageDown = this.handlePageDown.bind(this)
+ this.setState({firstVisibleItem: this.props.firstVisibleItem || 0})
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize)
+ }
+
+ handleResize() {
+ this.validatePagers()
+ }
+
+ componentDidMount() {
+ this.validatePagers()
+ }
+
+ componentDidUpdate() {
+ this.validatePagers()
+ }
+
+ validatePagers() {
+ const pageDownClass = classNames(
+ 'page-down',
+ { hidden: this.state.firstVisibleItem === 0 }
+ )
+ const pageUpClass = classNames(
+ 'page-up',
+ { hidden: this.lastElementVisible(this.state.firstVisibleItem) }
+ )
+ const node = ReactDOM.findDOMNode(this)
+ const pageDownNode = node.querySelector('.page-down')
+ const pageUpNode = node.querySelector('.page-up')
+ pageDownNode.className = pageDownClass
+ pageUpNode.className = pageUpClass
+ }
+
+
+ lastElementVisible(firstVisibleItem) {
+ const node = ReactDOM.findDOMNode(this)
+ const parentNode = node.parentNode
+ const maxWidth = parentNode.getBoundingClientRect().width
+ const visibleAreaNode = node.querySelector('.visible-area')
+ visibleAreaNode.style.width = maxWidth + 'px'
+ const itemNodes = visibleAreaNode.children
+ let width = 0
+ if (firstVisibleItem > 0) {
+ // if first item is not visible, account 20px for page-down element
+ width += 20
+ // account the right margin for page-down (see Carousel.scss)
+ width += 15
+ }
+ for (let i = 0; i < itemNodes.length; i++) {
+ const itemNode = itemNodes[i]
+ width += itemNode.getBoundingClientRect().width
+ if (i < itemNodes.length - 1) {
+ // account 30px for every carousel-item (see Carousel.scss)
+ width += 30
+ }
+ if (width > maxWidth) {
+ return false
+ }
+ }
+ return true
+ }
+
+ handlePageUp() {
+ if (!this.lastElementVisible(this.state.firstVisibleItem + 1)) {
+ const nextFirstVisibleItem = this.state.firstVisibleItem + 1
+ this.setState({firstVisibleItem: nextFirstVisibleItem})
+ }
+ }
+
+ handlePageDown() {
+ if (this.state.firstVisibleItem > 0) {
+ const nextFirstVisibleItem = this.state.firstVisibleItem - 1
+ this.setState({firstVisibleItem: nextFirstVisibleItem})
+ }
+ }
+
+ render() {
+ const carouselItem = (item, idx) => {
+ if (idx < this.state.firstVisibleItem) {
+ return
+ }
+
+ return (
+
+ {item}
+
+ )
+ }
+
+ return (
+
+
+
+
+
+ { this.props.children.map(carouselItem) }
+
+
+
+
+
+
With limited width
+
+
+
+
+
+
+
+
With full width
+
+
+
+
+
+
+
+
With limited width and custom first visible element
+
+
+
+
+
+
+
+
+
+ { subNav.map(subNavMap) }
+
+
+ )
+}
+
+export default SubNav
\ No newline at end of file
diff --git a/components/SubNav/SubNav.scss b/components/SubNav/SubNav.scss
new file mode 100644
index 000000000..78fe29e69
--- /dev/null
+++ b/components/SubNav/SubNav.scss
@@ -0,0 +1,21 @@
+@import 'topcoder/tc-includes';
+
+$subnav-item-bg-color: #B47DD6;
+$subnav-item-text-color: #7A7F83;
+
+.SubNav {
+ background-color: $accent-gray-dark;
+
+ .StandardListItem {
+ padding: 20px 0px;
+
+ .label {
+ color: $subnav-item-text-color;
+ }
+
+ .label:active,
+ .label:hover {
+ color: $white;
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/SubNav/SubNavExamples.jsx b/components/SubNav/SubNavExamples.jsx
new file mode 100644
index 000000000..ebd0c60ab
--- /dev/null
+++ b/components/SubNav/SubNavExamples.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import SubNav from './SubNav'
+
+require('./SubNavExamples.scss')
+
+const SubNavExamples = () => (
+
+
+
Compete Sub Navigation
+
+
+
+
Learn Sub Navigation
+
+
+
+
Community Sub Navigation
+
+
+
+