diff --git a/src/components/subnavigation/subnavigation.jsx b/src/components/subnavigation/subnavigation.jsx
index 959ae7285..62f4a78bb 100644
--- a/src/components/subnavigation/subnavigation.jsx
+++ b/src/components/subnavigation/subnavigation.jsx
@@ -9,10 +9,21 @@ require('./subnavigation.scss');
  */
 var SubNavigation = React.createClass({
     type: 'SubNavigation',
+    getDefaultProps: function () {
+        return {
+            align: 'middle'
+        };
+    },
     render: function () {
         var classes = classNames(
-            'sub-nav',
-            this.props.className
+            [
+                'sub-nav',
+                this.props.className
+            ],
+            {
+                'sub-nav-align-left': this.props.align === 'left',
+                'sub-nav-align-right': this.props.align === 'right'
+            }
         );
         return (
             <div className={classes}>
diff --git a/src/components/subnavigation/subnavigation.scss b/src/components/subnavigation/subnavigation.scss
index d6ed0446d..931f1d00d 100644
--- a/src/components/subnavigation/subnavigation.scss
+++ b/src/components/subnavigation/subnavigation.scss
@@ -53,4 +53,18 @@
             }
         }
     }
+
+    &.sub-nav-align-left {
+        justify-content: flex-start;
+
+        li {
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+
+    &.sub-nav-align-right {
+        justify-content: flex-end;
+    }
 }