diff --git a/components/bottomnavigation/BottomNavigation.scss b/components/bottomnavigation/BottomNavigation.scss
index 3596e9291..bf862665b 100644
--- a/components/bottomnavigation/BottomNavigation.scss
+++ b/components/bottomnavigation/BottomNavigation.scss
@@ -45,3 +45,19 @@
   }
   color: $blue-dark;
 }
+
+.BottomNavigation-menu--inverted {
+  .BottomNavigation-menu-item {
+    background-color: $blue-dark;
+    svg {
+      fill: rgba(255, 255, 255, 0.73);
+    }
+    color: rgba(255, 255, 255, 0.73);
+  }
+  .BottomNavigation-menu-item.active {
+    svg {
+      fill: white;
+    }
+    color: white;
+  }
+}
diff --git a/components/bottomnavigation/index.js b/components/bottomnavigation/index.js
index 420bf07b4..3f9d18ca4 100644
--- a/components/bottomnavigation/index.js
+++ b/components/bottomnavigation/index.js
@@ -1,15 +1,16 @@
 import React from 'react'
 import {Link} from 'react-router'
+import classNames from 'classnames'
 
 export default class BottomNavigation extends React.Component {
   render () {
-    const {children, links} = this.props
+    const {children, links, inverted} = this.props
     return (
       <div className='BottomNavigation'>
         <div className='BottomNavigation-content'>
           {children}
         </div>
-        <div className='BottomNavigation-menu'>
+        <div className={classNames('BottomNavigation-menu', {'BottomNavigation-menu--inverted': inverted})}>
           {links.map(link => (
             <Link activeClassName='active' to={link.link} className='BottomNavigation-menu-item' key={link.text}>
               {link.icon}