Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdbootstrap/react-drawer

Responsive React navigation Drawer built with the latest Bootstrap 5. Examples like sliding side drawer in a container, multilevel, material, right drawer & more. https://mdbootstrap.com/docs/react/extended/drawer
https://github.com/mdbootstrap/react-drawer

bootstrap bootstrap-template bootstrap-theme bootstrap5 css drawer html js pro react

Last synced: 16 days ago
JSON representation

Responsive React navigation Drawer built with the latest Bootstrap 5. Examples like sliding side drawer in a container, multilevel, material, right drawer & more. https://mdbootstrap.com/docs/react/extended/drawer

Awesome Lists containing this project

README 

        
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



Responsive React navigation Drawer built with the latest Bootstrap 5. Examples like sliding side drawer in a container, multilevel, material, right drawer & more.



Check out [React Drawer Documentation](https://mdbootstrap.com/docs/react/extended/drawer) for detailed instructions & even more examples.



## Basic example 

![Drawer Basic Example](https://user-images.githubusercontent.com/108793661/184821773-96434d56-28b5-4bc8-a399-56413e83f261.png)

```js

import React, { useState } from 'react';

import {

  MDBSideNav,

  MDBSideNavMenu,

  MDBSideNavItem,

  MDBSideNavLink,

  MDBSideNavCollapse,

  MDBBtn,

  MDBIcon

} from 'mdb-react-ui-kit';



export default function App() {

  const [basicOpen, setBasicOpen] = useState(true);

  const [basicCollapse1, setBasicCollapse1] = useState(true);

  const [basicCollapse2, setBasicCollapse2] = useState(false);



  return (

    <>

       setBasicOpen(e)}>

        

          

            

              

              Link 1

            

          

          

             setBasicCollapse1(!basicCollapse1)}>

              

              Category 1

            

            

              Link 2

              Link 3

            

          

          

             setBasicCollapse2(!basicCollapse2)}>

              

              Category 2

            

            

              Link 4

              Link 5

            

          

        

      



      


         setBasicOpen(!basicOpen)}>

          

        

      


    >

  );

}

```



## How to use?



1. Download MDB 5 - PRO REACT UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More examples (click on the image to see a live demo)

### Positioning:

[![React Drawer #1](https://user-images.githubusercontent.com/108793661/184822493-1e2f7ed4-b4f1-49fd-bb75-a3d908a38d39.png)](https://mdbootstrap.com/docs/react/extended/drawer#section-sidenav-positioning)



## Colors example:

[![React Drawer #2](https://user-images.githubusercontent.com/108793661/184822758-c15146b5-7ce1-40e4-b3e8-572e689109fe.png)](https://mdbootstrap.com/docs/react/extended/drawer#section-sidenav-colors)



## Dark example:

[![React Drawer #3](https://user-images.githubusercontent.com/108793661/184822933-cf96b292-a1ae-4216-b5a7-ce2a6cb1013e.png)](https://mdbootstrap.com/docs/react/extended/drawer#section-sidenav-dark)



## Inner scroll:

[![React Drawer #4](https://user-images.githubusercontent.com/108793661/184823092-a8ea2cd2-c388-40ad-9186-a7afc4837f85.png)](https://mdbootstrap.com/docs/react/extended/drawer#section-inner-scroll)



## Menu item scroll:

[![React Drawer #5](https://user-images.githubusercontent.com/108793661/184823259-d0e8b3da-4ff2-4b6d-aea2-a89ded73ea1c.png)](https://mdbootstrap.com/docs/react/extended/drawer#section-menu-item-scroll)



## Slim example:

[![React Drawer #6](https://user-images.githubusercontent.com/108793661/184823461-aaa80678-dffa-48a2-9ce4-49c916d8f717.png)](https://mdbootstrap.com/docs/react/extended/drawer#section-sidenav-slim)



You can find other examples [here](https://mdbootstrap.com/docs/react/extended/drawer).






## More extended React documentation