diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js
index 1a562d4..4a9708f 100644
--- a/src/components/Nav/Nav.js
+++ b/src/components/Nav/Nav.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import NavBrand from './NavBrand'
+import NavItem from './NavItem'
 import NavLeft from './NavLeft'
-import NavCenter from './NavCenter'
 import NavRight from './NavRight'
-import NavItem from './NavItem'
 import NavToggle from './NavToggle'
 import classNames from 'classnames'
 
@@ -16,7 +16,7 @@ const Nav = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav', {
+  const classes = classNames('navbar', {
     'has-shadow': hasShadow
   }, className)
 
@@ -35,8 +35,8 @@ Nav.defaultProps = {
   as: 'nav'
 }
 
+Nav.Brand = NavBrand
 Nav.Left = NavLeft
-Nav.Center = NavCenter
 Nav.Right = NavRight
 Nav.Item = NavItem
 Nav.Toggle = NavToggle
diff --git a/src/components/Nav/NavBrand.js b/src/components/Nav/NavBrand.js
new file mode 100644
index 0000000..519910d
--- /dev/null
+++ b/src/components/Nav/NavBrand.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const NavBrand = ({
+  as: Div,
+  className,
+  ...props
+}) => {
+  const classes = classNames('navbar-brand', className)
+
+  return <Div className={classes} {...props} />
+}
+
+NavBrand.displayName = 'Nav.Brand'
+
+NavBrand.propTypes = {
+  as: PropTypes.node,
+  className: PropTypes.string
+}
+
+NavBrand.defaultProps = {
+  as: 'div'
+}
+
+export default NavBrand
diff --git a/src/components/Nav/NavCenter.js b/src/components/Nav/NavCenter.js
deleted file mode 100644
index 704792b..0000000
--- a/src/components/Nav/NavCenter.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const NavCenter = ({
-  menu,
-  className,
-  ...props
-}) => {
-  const classes = classNames('nav-center', {
-    'nav-menu': menu
-  }, className)
-
-  return <div className={classes} {...props} />
-}
-
-NavCenter.displayName = 'Nav.Center'
-
-NavCenter.propTypes = {
-  menu: PropTypes.bool,
-  className: PropTypes.string
-}
-
-export default NavCenter
diff --git a/src/components/Nav/NavItem.js b/src/components/Nav/NavItem.js
index d3efaa3..008b8d6 100644
--- a/src/components/Nav/NavItem.js
+++ b/src/components/Nav/NavItem.js
@@ -6,16 +6,18 @@ const NavItem = ({
   as: Item,
   active,
   tab,
+  hasDropdown,
   hiddenTablet,
   hiddenMobile,
   className,
   ...props
 }) => {
-  const classes = classNames('nav-item', {
+  const classes = classNames('navbar-item', {
+    'has-dropdown': hasDropdown,
     'is-active': active,
-    'is-tab': tab,
+    'is-hidden-mobile': hiddenMobile,
     'is-hidden-tablet': hiddenTablet,
-    'is-hidden-mobile': hiddenMobile
+    'is-tab': tab
   }, className)
 
   return <Item className={classes} {...props} />
@@ -24,12 +26,13 @@ const NavItem = ({
 NavItem.displayName = 'Nav.Item'
 
 NavItem.propTypes = {
+  active: PropTypes.bool,
   as: PropTypes.node,
   className: PropTypes.string,
-  active: PropTypes.bool,
-  tab: PropTypes.bool,
+  hasDropdown: PropTypes.bool,
+  hiddenMobile: PropTypes.bool,
   hiddenTablet: PropTypes.bool,
-  hiddenMobile: PropTypes.bool
+  tab: PropTypes.bool
 }
 
 NavItem.defaultProps = {
diff --git a/src/components/Nav/NavLeft.js b/src/components/Nav/NavLeft.js
index dfd0bca..f88ed36 100644
--- a/src/components/Nav/NavLeft.js
+++ b/src/components/Nav/NavLeft.js
@@ -7,7 +7,7 @@ const NavLeft = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav-left', {
+  const classes = classNames('navbar-start', {
     'nav-menu': menu
   }, className)
 
diff --git a/src/components/Nav/NavRight.js b/src/components/Nav/NavRight.js
index b7f4dcb..5f39d90 100644
--- a/src/components/Nav/NavRight.js
+++ b/src/components/Nav/NavRight.js
@@ -7,7 +7,7 @@ const NavRight = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav-right', {
+  const classes = classNames('navbar-end', {
     'nav-menu': menu
   }, className)
 
diff --git a/src/components/Nav/NavToggle.js b/src/components/Nav/NavToggle.js
index befbebb..65907a1 100644
--- a/src/components/Nav/NavToggle.js
+++ b/src/components/Nav/NavToggle.js
@@ -7,7 +7,7 @@ const NavToggle = ({
   className,
   ...props
 }) => {
-  const classes = classNames('nav-toggle', className)
+  const classes = classNames('navbar-burger', className)
 
   return (
     <Toggle className={classes} {...props}>
diff --git a/src/components/Nav/Readme.md b/src/components/Nav/Readme.md
index d01b3d9..ab4289e 100644
--- a/src/components/Nav/Readme.md
+++ b/src/components/Nav/Readme.md
@@ -1,8 +1,7 @@
 The `nav` container can have 3 parts:
 
-- `nav-left`
-- `nav-center`
-- `nav-right`
+- `navbar-start`
+- `navbar-end`
 
 Each nav item needs to be wrapped in a `nav-item` element.
 
@@ -19,19 +18,17 @@ For responsiveness, 2 additional classes are available:
       <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma logo"/>
     </Nav.Item>
   </Nav.Left>
-  
-  <Nav.Center>
-    <Nav.Item>
-      <Icon>
-        <i className="fa fa-github"/>
-      </Icon>
-    </Nav.Item>
-    <Nav.Item>
-      <Icon>
-        <i className="fa fa-twitter"/>
-      </Icon>
-    </Nav.Item>
-  </Nav.Center>
+
+  <Nav.Item>
+    <Icon>
+      <i className="fa fa-github"/>
+    </Icon>
+  </Nav.Item>
+  <Nav.Item>
+    <Icon>
+      <i className="fa fa-twitter"/>
+    </Icon>
+  </Nav.Item>
 
   <Nav.Toggle/>
   <Nav.Right menu>
@@ -104,5 +101,3 @@ To optimise the space on desktop, but also allow the mobile view to be usable, y
   </Container>
 </Nav>
 ```
-
-