diff --git a/src/Nav.js b/src/Nav.js
index d4873cc2b4..e1c6f6d293 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -18,6 +18,22 @@ const Nav = React.createClass({
justified: React.PropTypes.bool,
onSelect: React.PropTypes.func,
collapsible: React.PropTypes.bool,
+ /**
+ * CSS classes for the wrapper `nav` element
+ */
+ className: React.PropTypes.string,
+ /**
+ * HTML id for the wrapper `nav` element
+ */
+ id: React.PropTypes.string,
+ /**
+ * CSS classes for the inner `ul` element
+ */
+ ulClassName: React.PropTypes.string,
+ /**
+ * HTML id for the inner `ul` element
+ */
+ ulId: React.PropTypes.string,
expanded: React.PropTypes.bool,
navbar: React.PropTypes.bool,
eventKey: React.PropTypes.any,
@@ -69,7 +85,8 @@ const Nav = React.createClass({
return (
{ValidComponentChildren.map(this.props.children, this.renderNavItem)}
diff --git a/test/NavSpec.js b/test/NavSpec.js
index c53a5bbb55..947666e573 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -115,6 +115,68 @@ describe('Nav', function () {
assert.ok(items[0].props.navItem);
});
+ it('Should apply className only to the wrapper nav element', function () {
+ const instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+ assert.notInclude(ulNode.className, 'nav-specific');
+
+ let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+ assert.include(navNode.className, 'nav-specific');
+ });
+
+ it('Should apply ulClassName to the inner ul element', function () {
+ const instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+ assert.include(ulNode.className, 'ul-specific');
+ assert.notInclude(ulNode.className, 'nav-specific');
+
+ let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+ assert.notInclude(navNode.className, 'ul-specific');
+ assert.include(navNode.className, 'nav-specific');
+ });
+
+ it('Should apply id to the wrapper nav element', function () {
+ const instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+ assert.equal(navNode.id, 'nav-id');
+
+ let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+ assert.notEqual(ulNode.id, 'nav-id');
+ });
+
+ it('Should apply ulId to the inner ul element', function () {
+ const instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ let ulNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'ul'));
+ assert.equal(ulNode.id, 'ul-id');
+
+ let navNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'nav'));
+ assert.equal(navNode.id, 'nav-id');
+ });
+
describe('Web Accessibility', function(){