Mega Menu
React Bootstrap Mega Menu - free examples, templates & tutorial
Responsive React Mega Menu built with Bootstrap 5. Examples of megamenu dropdown on click or hover. Templates with grid, images, links, lists, vertical menu and more.
To learn more read Navbar Docs.
Basic example
A basic dropdown mega menu inside of a Bootstrap navbar.
If you need to extend the depth of your menu by adding submenus to some of the items you could consider using a nested dropdown. Keep in mind that Mega Menu is already a complex component, so in order to keep your design clear and concise you probably shouldn't complicate it even further. It may be worth to consider re-organizing your page structure or using a search bar instead.
A standard practice is to use hamburger menu for mobile devices.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='my-4'>
<MDBCol md='6' lg='3' className='mb-3 mb-lg-0'>
<MDBListGroup flush>
<MDBListGroupItem tag='a' href='#' action>
Lorem ipsum
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Dolor sit
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Amet consectetur
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Adipisicing elit
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3' className='mb-3 mb-lg-0'>
<MDBListGroup flush>
<MDBListGroupItem tag='a' href='#' action>
Explicabo voluptas
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Perspiciatis quo
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Laudantium maiores
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Provident dolor
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3' className='mb-3 mb-md-0'>
<MDBListGroup flush>
<MDBListGroupItem tag='a' href='#' action>
Iste quaerato
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Est iure
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Praesentium
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Laboriosam
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3'>
<MDBListGroup flush>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Saepe
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Vel alias
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Sunt doloribus
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cum dolores
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}
Bolded headings
Check out different typography options to make the heading inside your multimenu stand out.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='my-4'>
<MDBCol md='6' lg='3' className='mb-3 mb-lg-0'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase font-weight-bold' tag='a' href='#' action>
Lorem ipsum
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Dolor sit
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Amet consectetur
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Adipisicing elit
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3' className='mb-3 mb-lg-0'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase font-weight-bold' tag='a' href='#' action>
Explicabo voluptas
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Perspiciatis quo
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Laudantium maiores
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Provident dolor
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3' className='mb-3 mb-md-0'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase font-weight-bold' tag='a' href='#' action>
Iste quaerato
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Est iure
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Praesentium
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Laboriosam
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase font-weight-bold' tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Saepe
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Vel alias
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Sunt doloribus
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
Cum dolores
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}
Punctation
Use list group or list typography to customize the lists inside your mega menu.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='my-4'>
<MDBCol md='6' lg='3' className='mb-3 mb-lg-0'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase' tag='a' href='#' action>
Lorem ipsum
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Dolor sit
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' />
Amet consectetur
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' />
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' />
Adipisicing elit
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3' className='mb-3 mb-lg-0'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase' tag='a' href='#' action>
Explicabo voluptas
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Perspiciatis quo
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' />
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Laudantium maiores
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Provident dolor
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3' className='mb-3 mb-md-0'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase' tag='a' href='#' action>
Iste quaerato
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Est iure
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Praesentium
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Laboriosam
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' lg='3'>
<MDBListGroup flush>
<MDBListGroupItem className='text-uppercase' tag='a' href='#' action>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Saepe
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Vel alias
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Sunt doloribus
</MDBListGroupItem>
<MDBListGroupItem tag='a' href='#' action>
<MDBIcon icon='caret-right' className='pe-2' /> Cum dolores
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}
Mixed content
By leveraging images, videos, product cards, weather cards, testimonial sliders, reviews, and any other element you can make your mega menu even more comprehensive. React flexbox utilities and Bootstrap grid should be enough to customize your menu to the highest extent.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow,
MDBIcon,
MDBRipple
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='my-4'>
<MDBCol md='6' xl='3' className='mb-3 mb-xl-0'>
<div className='pt-2'>
<p className='text-uppercase font-weight-bold'>Explicabo voluptas</p>
<MDBRipple
rippleTag='div'
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded mb-4'
>
<img
src='https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp'
className='img-fluid'
/>
<a href='#!'>
<div className='mask' style={{ backgroundColor: ' rgba(251,251,251, 0.15' }}></div>
</a>
</MDBRipple>
<div className='d-flex justify-content-between'>
<a href='' className='text-info'>
<i className='fas fa-plane pe-1'></i>Travels
</a>
<p>
<u>15.07.2020</u>
</p>
</div>
<a href='' className='text-dark'>
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id
nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci
iusto nam temporibus modi animi laboriosam?
</p>
</a>
</div>
</MDBCol>
<MDBCol md='6' xl='3' className='mb-3 mb-xl-0'>
<div className='pt-2'>
<p className='text-uppercase font-weight-bold'>Explicabo voluptas</p>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'
className='img-fluid shadow-1-strong rounded'
alt='Hollywood Sign on The Hill'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp'
className='img-fluid shadow-1-strong rounded'
alt='Palm Springs Road'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp'
className='img-fluid shadow-1-strong rounded'
alt='Los Angeles Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp'
className='img-fluid shadow-1-strong rounded'
alt='Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
</div>
</MDBCol>
<MDBCol md='6' xl='3' className='mb-3 mb-md-0'>
<MDBListGroup flush>
<MDBListGroupItem className='mb-0 text-uppercase font-weight-bold'>
Iste quaerato
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Est iure
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Praesentium
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Laboriosam
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Dolor sit
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Amet consectetur
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Adipiscing elit
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
<MDBCol md='6' className='col-md-6 col-xl-3'>
<MDBListGroup flush>
<MDBListGroupItem className='mb-0 text-uppercase font-weight-bold'>
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Saepe
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Vel alias
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Sunt doloribus
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Cum dolores
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Perspiciatis quo
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Cras justo odio
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Laudantium maiores
</MDBListGroupItem>
<MDBListGroupItem href='' action>
<MDBIcon icon='caret-right' className='pe-2' />
Provident dolor
</MDBListGroupItem>
</MDBListGroup>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}
Media list
Creating a list of news articles in your mega menu, can be easily achieved by utilizing media objects.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='my-4'>
<MDBCol md='12' lg='4' className='mb-4 mb-lg-0'>
<p className='text-uppercase font-weight-bold'>Explicabo voluptas</p>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'
className='img-fluid shadow-1-strong rounded'
alt='Hollywood Sign on The Hill'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp'
className='img-fluid shadow-1-strong rounded'
alt='Palm Springs Road'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp'
className='img-fluid shadow-1-strong rounded'
alt='Los Angeles Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp'
className='img-fluid shadow-1-strong rounded'
alt='Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
</MDBCol>
<MDBCol md='6' lg='4' className='mb-4 mb-md-0'>
<p className='text-uppercase font-weight-bold'>Iste quaerato</p>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'
className='img-fluid shadow-1-strong rounded'
alt='Hollywood Sign on The Hill'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp'
className='img-fluid shadow-1-strong rounded'
alt='Palm Springs Road'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp'
className='img-fluid shadow-1-strong rounded'
alt='Los Angeles Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp'
className='img-fluid shadow-1-strong rounded'
alt='Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
</MDBCol>
<MDBCol md='6' lg='4' className='mb-4 mb-md-0'>
<p className='text-uppercase font-weight-bold'>Cras justo odio</p>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'
className='img-fluid shadow-1-strong rounded'
alt='Hollywood Sign on The Hill'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp'
className='img-fluid shadow-1-strong rounded'
alt='Palm Springs Road'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp'
className='img-fluid shadow-1-strong rounded'
alt='Los Angeles Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp'
className='img-fluid shadow-1-strong rounded'
alt='Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}
Big news
Adding a newsfeed preview at the top of the mega-menu dropdown, is a standard practice in blog templates.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow,
MDBRipple,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='row'>
<MDBCol md='4' className='mb-4 mb-md-0'>
<p className='text-uppercase font-weight-bold'>Explicabo voluptas</p>
<MDBRipple
rippleTag='div'
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded mb-4'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp' className='img-fluid' />
<a href='#!'>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.15)' }}></div>
</a>
</MDBRipple>
<div className='d-flex justify-content-between'>
<a href='' className='text-info'>
<MDBIcon icon='plane' className='pe-1'></MDBIcon>Travels
</a>
<p>
<u>15.07.2020</u>
</p>
</div>
<a href='' className='text-dark'>
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id
nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci iusto
nam temporibus modi animi laboriosam?
</p>
</a>
</MDBCol>
<MDBCol md='4' className='mb-4 mb-md-0'>
<p className='text-uppercase font-weight-bold'>Iste quaerato</p>
<MDBRipple
rippleTag='div'
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded mb-4'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/011.webp' className='img-fluid' />
<a href='#!'>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.15)' }}></div>
</a>
</MDBRipple>
<div className='d-flex justify-content-between'>
<a href='' className='text-danger'>
<MDBIcon icon='chart-pie' className='pe-1'></MDBIcon>Business
</a>
<p>
<u>15.07.2020</u>
</p>
</div>
<a href='' className='text-dark'>
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id
nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci iusto
nam temporibus modi animi laboriosam?
</p>
</a>
</MDBCol>
<div className='col-md-4'>
<p className='text-uppercase font-weight-bold'>Cras justo odio</p>
<MDBRipple
rippleTag='div'
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded mb-4'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/018.webp' className='img-fluid' />
<a href='#!'>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.15)' }}></div>
</a>
</MDBRipple>
<div className='d-flex justify-content-between'>
<a href='' className='text-warning'>
<MDBIcon icon='code' className='pe-1'></MDBIcon>Technology
</a>
<p>
<u>15.07.2020</u>
</p>
</div>
<a href='' className='text-dark'>
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id
nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci iusto
nam temporibus modi animi laboriosam?
</p>
</a>
</div>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}
Mixed media
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBNavbar,
MDBNavbarNav,
MDBNavbarItem,
MDBNavbarLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBListGroup,
MDBListGroupItem,
MDBRow,
MDBRipple,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBNavbar expand='lg' light bgColor='light'>
<MDBContainer fluid>
<MDBNavbarNav className='me-auto ps-lg-0' style={{ paddingLeft: '0.15rem' }}>
<MDBNavbarItem>
<MDBNavbarLink active aria-current='page' href='#'>
Regular link
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem className='position-static'>
<MDBDropdown>
<MDBDropdownToggle tag='a' className='nav-link'>
Mega menu
</MDBDropdownToggle>
<MDBDropdownMenu
className='mt-0 w-100 justify-content-center'
style={{
borderTopLeftRadius: '0',
borderTopRightRadius: '0',
}}
>
<MDBContainer>
<MDBRow className='my-4'>
<MDBCol md='12' xl='6' className='mb-4 col-lg-0'>
<p
className='
text-uppercase
font-weight-bold
text-center
d-flex
justify-content-center
align-items-center
'
>
Iste quaerato
<MDBBadge color='danger' className='shadow-1-strong ms-2'>
News of the day
</MDBBadge>
</p>
<MDBRow className='gx-4'>
<MDBCol md='6' className='mb-4'>
<MDBRipple
rippleTag='div'
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded mb-4'
>
<img src='https://mdbcdn.b-cdn.net/img/new/slides/080.webp' className='img-fluid' />
<a href='#!'>
<div
className='mask'
style={{ backgroundColor: 'rgba(251, 251, 251, 0.15)' }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol md='6' className='mb-3'>
<p className='text-muted'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.
</p>
<button type='button' className='btn btn-primary'>
Read more
</button>
</MDBCol>
</MDBRow>
</MDBCol>
<MDBCol md='6' xl='3' className='mb-4 mb-md-0'>
<p className='text-uppercase font-weight-bold'>Explicabo voluptas</p>
<MDBRipple
rippleTag='div'
rippleColor='light'
className='bg-image hover-overlay shadow-1-strong rounded mb-4'
>
<img src='https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp' className='img-fluid' />
<a href='#!'>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.15)' }}></div>
</a>
</MDBRipple>
<div className='d-flex justify-content-between'>
<a href='' className='text-info'>
<MDBIcon icon='plane' className='pe-1'></MDBIcon>Travels
</a>
<p>
<u>15.07.2020</u>
</p>
</div>
<a href='' className='text-dark'>
<h5>This is title of the news</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id
nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci iusto
nam temporibus modi animi laboriosam?
</p>
</a>
</MDBCol>
<MDBCol md='6' xl='3'>
<p className='text-uppercase font-weight-bold'>Explicabo voluptas</p>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp'
className='img-fluid shadow-1-strong rounded'
alt='Hollywood Sign on The Hill'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/042.webp'
className='img-fluid shadow-1-strong rounded'
alt='Palm Springs Road'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/043.webp'
className='img-fluid shadow-1-strong rounded'
alt='Los Angeles Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
<a href='' className='text-dark'>
<MDBRow className='mb-4 border-bottom pb-2'>
<MDBCol col='3'>
<img
src='https://mdbcdn.b-cdn.net/img/new/standard/city/044.webp'
className='img-fluid shadow-1-strong rounded'
alt='Skyscrapers'
/>
</MDBCol>
<MDBCol col='9'>
<p className='mb-2'>
<strong>Lorem ipsum dolor sit amet</strong>
</p>
<p>
<u>15.07.2020</u>
</p>
</MDBCol>
</MDBRow>
</a>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBContainer>
</MDBNavbar>
);
}