diff --git a/src/Navbar.js b/src/Navbar.js
index 47c45d0a9..5e34e8edb 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -12,14 +12,17 @@ const propTypes = {
color: PropTypes.string,
role: PropTypes.string,
tag: tagPropType,
+ container: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
className: PropTypes.string,
cssModule: PropTypes.object,
expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ children: PropTypes.node,
};
const defaultProps = {
tag: 'nav',
expand: false,
+ container: 'fluid',
};
const getExpandClass = (expand) => {
@@ -42,7 +45,9 @@ const Navbar = (props) => {
fixed,
sticky,
color,
+ container,
tag: Tag,
+ children,
...attributes
} = props;
@@ -59,8 +64,17 @@ const Navbar = (props) => {
}
), cssModule);
+ const containerClass = container && (container === true) ? 'container' : `container-${container}`;
+
return (
-
+
+ { container ?
+
+ {children}
+
:
+ children
+ }
+
);
};
diff --git a/src/__tests__/Navbar.spec.js b/src/__tests__/Navbar.spec.js
index 0f81b7968..51b94d7c1 100644
--- a/src/__tests__/Navbar.spec.js
+++ b/src/__tests__/Navbar.spec.js
@@ -6,37 +6,60 @@ describe('Navbar', () => {
it('should render .navbar markup', () => {
const wrapper = shallow();
- expect(wrapper.html()).toBe('');
+ expect(wrapper.html()).toBe('');
});
it('should render default .navbar-expand class', () => {
const wrapper = shallow();
- expect(wrapper.html()).toBe('');
+ expect(wrapper.html()).toBe('');
});
it('should render size based .navbar-expand-* classes', () => {
const wrapper = shallow();
- expect(wrapper.html()).toBe('');
+ expect(wrapper.html()).toBe('');
});
it('should render custom tag', () => {
const wrapper = shallow();
- expect(wrapper.html()).toBe('
');
+ expect(wrapper.html()).toBe('');
});
it('should render role', () => {
const wrapper = shallow();
- expect(wrapper.html()).toBe('');
+ expect(wrapper.html()).toBe('');
+ });
+
+ it('should support container options', () => {
+ let wrapper = shallow();
+ expect(wrapper.html()).toBe('');
+
+ wrapper = shallow();
+ expect(wrapper.html()).toBe('');
+
+ wrapper = shallow();
+ expect(wrapper.html()).toBe('');
+
+ wrapper = shallow();
+ expect(wrapper.html()).toBe('');
+
+ wrapper = shallow();
+ expect(wrapper.html()).toBe('');
+
+ wrapper = shallow();
+ expect(wrapper.html()).toBe('');
+
+ wrapper = shallow();
+ expect(wrapper.html()).toBe('');
});
it('should render children', () => {
const wrapper = shallow(Children);
- expect(wrapper.html()).toBe('');
+ expect(wrapper.html()).toBe('');
});
it('should pass additional classNames', () => {
diff --git a/stories/examples/Navbar.js b/stories/examples/Navbar.js
index 8c6898a6d..8aabbb2a3 100644
--- a/stories/examples/Navbar.js
+++ b/stories/examples/Navbar.js
@@ -24,38 +24,36 @@ const Example = (args) => {
return (
-
- reactstrap
-
-
-
- Simple Text
-
-
+ reactstrap
+
+
+
+ Simple Text
+
);
@@ -66,7 +64,8 @@ Example.args = {
light: true,
dark: false,
full: false,
- expand: 'md'
+ expand: 'md',
+ container: 'fluid',
}
Example.argTypes = {
@@ -74,6 +73,10 @@ Example.argTypes = {
control: { type: 'select' },
options: colors
},
+ container: {
+ control: { type: 'select' },
+ options: [false, true, 'sm', 'md', 'lg', 'xl', 'fluid']
+ },
expand: {
control: { type: 'select' },
options: [false, true, 'sm', 'md', 'lg', 'xl']
diff --git a/types/lib/Navbar.d.ts b/types/lib/Navbar.d.ts
index 498a82b1f..371ef64d9 100644
--- a/types/lib/Navbar.d.ts
+++ b/types/lib/Navbar.d.ts
@@ -9,6 +9,7 @@ export interface NavbarProps extends React.HTMLAttributes {
fixed?: string;
sticky?: string;
color?: string;
+ container?: boolean | 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
tag?: React.ElementType;
cssModule?: CSSModule;
expand?: boolean | string;