React Navigation
React Navigation - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
React Bootstrap navigation is a combination of navbar, sidenav, and footer in various forms and different functionalities like non-fixed navbar or hidden sidenav.
3. Full Page Intro with non-fixed Navbar
4. Full Page Intro with fixed Navbar
5. Full Page Intro with fixed, transparent Navbar
6. Full Page Intro with non-fixed, transparent Navbar
7. Double Navigation with fixed SideNav & fixed Navbar
8. Double Navigation with fixed SideNav & non-fixed Navbar
9. Double Navigation with hidden SideNav & fixed Navbar
10. Double Navigation with hidden SideNav & non-fixed Navbar
Regular fixed Navbar
import React from 'react';
import { MDBContainer, MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class FixedNavbarExample extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
const bgPink = {backgroundColor: '#e91e63'}
const container = {height: 1300}
return(
<div>
<Router>
<header>
<MDBNavbar style={bgPink} dark expand="md" scrolling fixed="top">
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={ this.onClick } />
<MDBCollapse isOpen = { this.state.collapse } navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Features</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Pricing</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Options</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon fab icon="facebook-f" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon fab icon="twitter" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon fab icon="instagram" /></MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</header>
</Router>
<MDBContainer style={container} className="text-center mt-5 pt-5">
<h2>This Navbar is fixed</h2>
<h5>It will always stay visible on the top, even when you scroll down</h5>
<br/>
<p>Full page intro with background image will be always displayed in full screen mode, regardless of device</p>
</MDBContainer>
</div>
);
}
}
export default FixedNavbarExample;
Regular non-fixed Navbar
import React from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon, MDBContainer } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class NonFixedNavbarExample extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
const container = { height: 1300 }
return (
<div>
<Router>
<header>
<MDBNavbar color="default-color" dark expand="md">
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.onClick} />
<MDBCollapse isOpen={this.state.collapse} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Features</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Pricing</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Opinions</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon fab icon="facebook-f" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon fab icon="twitter" /></MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#"><MDBIcon fab icon="instagram" /></MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</header>
</Router>
<MDBContainer style={container} className="text-center mt-5">
<h2>This Navbar isn't fixed</h2>
<h5>When you scroll down it will disappear</h5>
</MDBContainer>
</div>
);
}
}
export default NonFixedNavbarExample;
Full Page Intro with non-fixed Navbar
import React from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBView, MDBMask } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class FullPageIntroWithNonFixedNavbar extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
isWideEnough: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
return (
<div>
<Router>
<header>
<MDBNavbar color="black" fixed="top" dark expand="md">
<MDBContainer>
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.onClick} />
<MDBCollapse isOpen={this.state.collapse} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
</Router>
<MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(51).webp">
<MDBMask overlay="black-strong" className="flex-center flex-column text-white text-center">
<h2>This Navbar isn't fixed</h2>
<h5>When you scroll down it will disappear</h5>
<br />
<p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
</MDBMask>
</MDBView>
</header>
<main>
<MDBContainer className="text-center my-5">
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</MDBContainer>
</main>
</div>
);
}
}
export default FullPageIntroWithNonFixedNavbar;
Full Page Intro with fixed Navbar
import React from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBMask, MDBView } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class FullPageIntroWithFixedNavbar extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
isWideEnough: false
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse
});
}
render() {
return (
<div>
<header>
<Router>
<MDBNavbar color="indigo" dark expand="md" fixed="top">
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
{!this.state.isWideEnough && <MDBNavbarToggler onClick={this.onClick} />}
<MDBCollapse isOpen={this.state.collapse} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</Router>
<MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(50).webp">
<MDBMask overlay="black-light" className="flex-center flex-column text-white text-center">
<h2>This Navbar is fixed</h2>
<h5>It will always stay visible on the top, even when you scroll down</h5>
<br />
<p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
</MDBMask>
</MDBView>
</header>
<main>
<MDBContainer className="text-center my-5">
<p align="justify">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</MDBContainer>
</main>
</div>
);
}
}
export default FullPageIntroWithFixedNavbar;
Full Page Intro with fixed, transparent Navbar
import React from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBMask, MDBView } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class FullPageIntroWithFixedTransparentNavbar extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
isWideEnough: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
return (
<div>
<header>
<Router>
<MDBNavbar color="bg-primary" fixed="top" dark expand="md" scrolling transparent>
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
{!this.state.isWideEnough && <MDBNavbarToggler onClick={this.onClick} />}
<MDBCollapse isOpen={this.state.collapse} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</Router>
<MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(40).webp">
<MDBMask overlay="purple-light" className="flex-center flex-column text-white text-center">
<h2>This Navbar is fixed</h2>
<h5>It will always stay visible on the top, even when you scroll down</h5>
<p>Navbar's background will switch from transparent to solid color while scrolling down</p><br />
<p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
</MDBMask>
</MDBView>
</header>
<main>
<MDBContainer className="text-center my-5">
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</MDBContainer>
</main>
</div>
);
}
}
export default FullPageIntroWithFixedTransparentNavbar;
Full Page Intro with non-fixed, transparent Navbar
import React from 'react';
import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBContainer, MDBMask, MDBView } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class FullPageIntroWithNonFixedTransparentNavbar extends React.Component {
constructor(props) {
super(props);
this.state = {
collapse: false,
};
this.onClick = this.onClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse,
});
}
render() {
return (
<div>
<header>
<MDBView src="https://mdbootstrap.com/img/Photos/Others/img%20(42).webp">
<Router>
<MDBNavbar dark expand="md">
<MDBContainer>
<MDBNavbarBrand href="/">
<strong>Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.onClick} />
<MDBCollapse isOpen={this.state.collapse} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#">Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
</Router>
<MDBMask overlay="indigo-slight" className="flex-center flex-column text-white text-center">
<h2>This Navbar isn't fixed</h2>
<h5>When you scroll down it will disappear</h5><br />
<p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
</MDBMask>
</MDBView>
</header>
<main>
<MDBContainer className="text-center my-5">
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</MDBContainer>
</main>
</div>
);
}
}
export default FullPageIntroWithNonFixedTransparentNavbar;
Double Navigation with fixed SideNav & fixed Navbar MDB Pro component
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";
class DoubleNavigationPage extends React.Component {
constructor(props) {
super(props);
this.state = {
toggleStateA: false,
breakWidth: 1300,
windowWidth: 0
};
}
componentDidMount() {
this.handleResize();
window.addEventListener("resize", this.handleResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleResize);
}
handleResize = () =>
this.setState({
windowWidth: window.innerWidth
});
handleToggleClickA = () => {
this.setState({
toggleStateA: !this.state.toggleStateA
});
};
render() {
const navStyle = {
paddingLeft:
this.state.windowWidth > this.state.breakWidth ? "210px" : "16px"
};
const mainStyle = {
margin: "0 6%",
paddingTop: "5.5rem",
paddingLeft:
this.state.windowWidth > this.state.breakWidth ? "240px" : "0"
};
const specialCaseNavbarStyles = {
WebkitBoxOrient: "horizontal",
flexDirection: "row"
};
return (
<Router>
<div className="fixed-sn light-blue-skin">
<MDBSideNav
logo="https://mdbootstrap.com/img/logo/mdb-transparent.webp"
triggerOpening={this.state.toggleStateA}
breakWidth={this.state.breakWidth}
bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.webp"
mask="strong"
fixed
>
<li>
<ul className="social">
<li>
<a href="#!">
<MDBIcon fab icon="facebook-f" />
</a>
</li>
<li>
<a href="#!">
<MDBIcon fab icon="pinterest" />
</a>
</li>
<li>
<a href="#!">
<MDBIcon fab icon="google-plus-g" />
</a>
</li>
<li>
<a href="#!">
<MDBIcon fab icon="twitter" />
</a>
</li>
</ul>
</li>
<MDBInput
type="text"
hint="Search"
style={{
color: "#fff",
padding: "0 10px 8px 30px",
boxSizing: "border-box"
}}
/>
<MDBSideNavNav>
<MDBSideNavCat
name="Submit blog"
id="submit-blog-cat"
icon="chevron-right"
>
<MDBSideNavItem>Submit listing</MDBSideNavItem>
<MDBSideNavItem>Registration form</MDBSideNavItem>
</MDBSideNavCat>
<MDBSideNavCat
iconRegular
name="Instruction"
id="instruction-cat"
icon="hand-pointer"
>
<MDBSideNavItem>For bloggers</MDBSideNavItem>
<MDBSideNavItem>For authors</MDBSideNavItem>
</MDBSideNavCat>
<MDBSideNavCat name="About" id="about-cat" icon="eye">
<MDBSideNavItem>Instruction</MDBSideNavItem>
<MDBSideNavItem>Monthly meetings</MDBSideNavItem>
</MDBSideNavCat>
<MDBSideNavCat
name="Contact me"
id="contact-me-cat"
icon="envelope"
>
<MDBSideNavItem>FAQ</MDBSideNavItem>
<MDBSideNavItem>Write a message</MDBSideNavItem>
</MDBSideNavCat>
</MDBSideNavNav>
</MDBSideNav>
<MDBNavbar style={navStyle} double expand="md" fixed="top" scrolling>
<MDBNavbarNav left>
<MDBNavItem>
<div
onClick={this.handleToggleClickA}
key="sideNavToggleA"
style={{
lineHeight: "32px",
marginRight: "1em",
verticalAlign: "middle"
}}
>
<MDBIcon icon="bars" color="white" size="2x" />
</div>
</MDBNavItem>
<MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
Material Design for Bootstrap
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right style={specialCaseNavbarStyles}>
<MDBNavItem active>
<MDBNavLink to="#!">
<MDBIcon icon="envelope" className="d-inline-inline" />{" "}
<div className="d-none d-md-inline">Contact</div>
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">
<MDBIcon far icon="comments" className="d-inline-inline" />{" "}
<div className="d-none d-md-inline">Support</div>
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">
<MDBIcon icon="user" className="d-inline-inline" />{" "}
<div className="d-none d-md-inline">Account</div>
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<div className="d-none d-md-inline">Dropdown</div>
</MDBDropdownToggle>
<MDBDropdownMenu right>
<MDBDropdownItem href="#!">Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
</MDBNavbar>
<main style={mainStyle}>
<MDBContainer fluid style={{ height: 2000 }} className="mt-5">
<h2>
Advanced Double Navigation with fixed SideNav & fixed Navbar:
</h2>
<br />
<h5>1. Fixed side menu, hidden on small devices.</h5>
<h5>
2. Fixed Navbar. It will always stay visible on the top, even
when you scroll down.
</h5>
</MDBContainer>
</main>
</div>
</Router>
);
}
}
export default DoubleNavigationPage;
Double Navigation with fixed SideNav & non-fixed Navbar MDB Pro component
import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";
class DoubleNavigationPage extends React.Component {
constructor(props) {
super(props);
this.state = {
toggleStateA: false,
breakWidth: 1300,
windowWidth: 0
};
}
componentDidMount() {
this.handleResize();
window.addEventListener("resize", this.handleResize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.handleResize);
}
handleResize = () =>
this.setState({
windowWidth: window.innerWidth
});
handleToggleClickA = () => {
this.setState({
toggleStateA: !this.state.toggleStateA
});
};
render() {
const navStyle = {
paddingLeft:
this.state.windowWidth > this.state.breakWidth ? "210px" : "16px"
};
const mainStyle = {
margin: "0 6%",
paddingTop: "5.5rem",
paddingLeft:
this.state.windowWidth > this.state.breakWidth ? "240px" : "0"
};
const specialCaseNavbarStyles = {
WebkitBoxOrient: "horizontal",
flexDirection: "row"
};
return (
<Router>
<div className="fixed-sn pink-skin">
<MDBSideNav
logo="https://mdbootstrap.com/img/logo/mdb-transparent.webp"
triggerOpening={this.state.toggleStateA}
breakWidth={this.state.breakWidth}
bg="https://mdbootstrap.com/img/Photos/Others/sidenav4.webp"
mask="strong"
fixed
>
<li>
<ul className="social">
<li>
<a href="#!">
<MDBIcon fab icon="facebook-f" />
</a>
</li>
<li>
<a href="#!">
<MDBIcon fab icon="pinterest" />
</a>
</li>
<li>
<a href="#!">
<MDBIcon fab icon="google-plus-g" />
</a>
</li>
<li>
<a href="#!">
<MDBIcon fab icon="twitter" />
</a>
</li>
</ul>
</li>
<MDBInput
type="text"
hint="Search"
style={{
color: "#fff",
padding: "0 10px 8px 30px",
boxSizing: "border-box"
}}
/>
<MDBSideNavNav>
<MDBSideNavCat
name="Submit blog"
id="submit-blog-cat"
icon="chevron-right"
>
<MDBSideNavItem>Submit listing</MDBSideNavItem>
<MDBSideNavItem>Registration form</MDBSideNavItem>
</MDBSideNavCat>
<MDBSideNavCat
iconRegular
name="Instruction"
id="instruction-cat"
icon="hand-pointer"
>
<MDBSideNavItem>For bloggers</MDBSideNavItem>
<MDBSideNavItem>For authors</MDBSideNavItem>
</MDBSideNavCat>
<MDBSideNavCat name="About" id="about-cat" icon="eye">
<MDBSideNavItem>Instruction</MDBSideNavItem>
<MDBSideNavItem>Monthly meetings</MDBSideNavItem>
</MDBSideNavCat>
<MDBSideNavCat
name="Contact me"
id="contact-me-cat"
icon="envelope"
>
<MDBSideNavItem>FAQ</MDBSideNavItem>
<MDBSideNavItem>Write a message</MDBSideNavItem>
</MDBSideNavCat>
</MDBSideNavNav>
</MDBSideNav>
<MDBNavbar style={navStyle} double expand="md">
<MDBNavbarNav left>
<MDBNavItem>
<div
onClick={this.handleToggleClickA}
key="sideNavToggleA"
style={{
lineHeight: "32px",
marginRight: "1em",
verticalAlign: "middle"
}}
>
<MDBIcon icon="bars" color="white" size="2x" />
</div>
</MDBNavItem>
<MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>
Material Design for Bootstrap
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right style={specialCaseNavbarStyles}>
<MDBNavItem active>
<MDBNavLink to="#!">
<MDBIcon icon="envelope" className="d-inline-inline" />{" "}
<div className="d-none d-md-inline">Contact</div>
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">
<MDBIcon far icon="comments" className="d-inline-inline" />{" "}
<div className="d-none d-md-inline">Support</div>
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">
<MDBIcon icon="user" className="d-inline-inline" />{" "}
<div className="d-none d-md-inline">Account</div>
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<div className="d-none d-md-inline">Dropdown</div>
</MDBDropdownToggle>
<MDBDropdownMenu right>
<MDBDropdownItem href="#!">Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
</MDBNavbar>
<main style={mainStyle}>
<MDBContainer fluid style={{ height: 2000 }} className="mt-5">
<h2>Advanced Double Navigation with fixed SideNav & non-fixed Navbar:</h2>
<br />
<h5>1. Fixed side menu, hidden on small devices.</h5>
<h5>2. Non-fixed Navbar. It will disappear when you scroll down.</h5>
</MDBContainer>
</main>
</div>
</Router>
);
}
}
export default DoubleNavigationPage;
