{"id":26703996,"url":"https://github.com/mdbootstrap/react-sidebar","last_synced_at":"2026-04-08T16:31:52.038Z","repository":{"id":50323434,"uuid":"518766011","full_name":"mdbootstrap/react-sidebar","owner":"mdbootstrap","description":"Sidebar is an additional navigation component that provides extensive support and a clear way for navigating through complex websites with hundreds of links and subpages.","archived":false,"fork":false,"pushed_at":"2022-08-01T11:49:19.000Z","size":546,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-08-23T00:41:01.032Z","etag":null,"topics":["bootstrap","bootstrap-navbar","bootstrap-react","bootstrap-sidebar","bootstrap-sidenav","bootstrap-template","bootstrap-theme","bootstrap5","jsx","react","sidebar"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/react/extended/sidebar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-28T08:37:12.000Z","updated_at":"2024-02-19T11:07:19.000Z","dependencies_parsed_at":"2022-09-01T16:04:53.676Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-sidebar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/mdbootstrap/react-sidebar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-sidebar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-sidebar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31564877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-navbar","bootstrap-react","bootstrap-sidebar","bootstrap-sidenav","bootstrap-template","bootstrap-theme","bootstrap5","jsx","react","sidebar"],"created_at":"2025-03-27T04:22:38.303Z","updated_at":"2026-04-08T16:31:52.022Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"\nSidebar is an additional navigation component that provides extensive support and a clear way for navigating through complex websites with hundreds of links and subpages.\n\nCheck out [React Sidebar Documentation](https://mdbootstrap.com/docs/react/extended/sidebar/) for detailed instructions \u0026 even more examples.\n\n## Basic example\n\n![React Sidebar](https://mdbootstrap.com/img/Marketing/github/side-navbar/basic.png)\n\n```js\nimport React, { useState } from 'react';\nimport {\n  MDBContainer,\n  MDBNavbar,\n  MDBNavbarBrand,\n  MDBNavbarToggler,\n  MDBIcon,\n  MDBNavbarNav,\n  MDBNavbarItem,\n  MDBNavbarLink,\n  MDBDropdown,\n  MDBDropdownToggle,\n  MDBDropdownMenu,\n  MDBDropdownItem,\n  MDBDropdownLink,\n  MDBCollapse,\n  MDBRipple,\n  MDBBadge,\n  MDBInput,\n  MDBListGroup, \n  MDBListGroupItem\n} from 'mdb-react-ui-kit';\n\nexport default function Basic() {\n  const [showShow, setShowShow] = useState(false);\n\n  const toggleShow = () =\u003e setShowShow(!showShow);\n\n  return (\n    \u003c\u003e\n      \u003clink\n        href=\"https://use.fontawesome.com/releases/v5.15.1/css/all.css\"\n        rel=\"stylesheet\"\n    \t/\u003e\n      \u003cMDBCollapse show={showShow} tag=\"nav\" className=\"d-lg-block bg-white sidebar\"\u003e\n        \u003cdiv className=\"position-sticky\"\u003e\n          \u003cMDBListGroup flush className=\"mx-3 mt-4\"\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded rounded'\u003e\n                \u003cMDBIcon fas icon=\"tachometer-alt me-3\" /\u003e\n                Main Dashboard\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded' active aria-current='true'\u003e\n                \u003cMDBIcon fas icon=\"chart-area me-3\" /\u003e\n                Website traffic\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"lock me-3\" /\u003e\n                Password\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"chart-line me-3\" /\u003e\n                Analitics\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"chart-pie me-3\" /\u003e\n                SEO\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon far icon=\"chart-bar me-3\" /\u003e\n                Orders\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"globe me-3\" /\u003e\n                International\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"building me-3\" /\u003e\n                Partners\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"calendar me-3\" /\u003e\n                Calendar\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 border-bottom rounded'\u003e\n                \u003cMDBIcon fas icon=\"users me-3\" /\u003e\n                User\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n\n            \u003cMDBRipple rippleTag='span'\u003e\n              \u003cMDBListGroupItem tag='a' href='#' action className='border-0 rounded'\u003e\n                \u003cMDBIcon fas icon=\"money-bill me-3\" /\u003e\n                Sales\n              \u003c/MDBListGroupItem\u003e\n            \u003c/MDBRipple\u003e\n          \u003c/MDBListGroup\u003e\n        \u003c/div\u003e\n      \u003c/MDBCollapse\u003e\n\n      \u003cMDBNavbar expand='lg' light bgColor='light'\u003e\n        \u003cMDBContainer fluid\u003e\n          \u003cMDBNavbarNav className=\"d-flex flex-row align-items-center w-auto\"\u003e\n            \u003cMDBNavbarToggler\n              type='button'\n              aria-label='Toggle navigation'\n              onClick={toggleShow}\n            \u003e\n              \u003cMDBIcon icon='bars' fas /\u003e\n            \u003c/MDBNavbarToggler\u003e\n            \u003cMDBNavbarBrand href='#'\u003e\n              \u003cimg\n                src='https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp'\n                height='30'\n                alt=''\n                loading='lazy'\n              /\u003e\n            \u003c/MDBNavbarBrand\u003e\n\n            \u003cMDBCollapse navbar\u003e\n              \u003cMDBNavbarItem className=\"d-flex align-items-center\"\u003e\n                \u003cMDBInput label='Search (ctrl + \"/\" to focus)' id='form1' type='text' /\u003e\n                \u003cMDBIcon fas icon=\"search mx-2\" /\u003e\n              \u003c/MDBNavbarItem\u003e\n            \u003c/MDBCollapse\u003e\n\n\n          \u003c/MDBNavbarNav\u003e\n          \u003cMDBNavbarNav className=\"d-flex flex-row justify-content-end w-auto\"\u003e\n\n            \u003cMDBNavbarItem className='me-3 me-lg-0 d-flex align-items-center'\u003e\n              \u003cMDBDropdown\u003e\n\n                \u003cMDBDropdownToggle tag=\"a\" href=\"#!\" className=\"hidden-arrow nav-link\"\u003e\n                  \u003cMDBIcon fas icon=\"bell\" /\u003e\n                  \u003cMDBBadge color='danger' notification pill\u003e\n                    1\n                  \u003c/MDBBadge\u003e\n                \u003c/MDBDropdownToggle\u003e\n\n                \u003cMDBDropdownMenu\u003e\n                  \u003cMDBDropdownItem\u003e\n                    \u003cMDBDropdownLink href=\"#\"\u003eSome news\u003c/MDBDropdownLink\u003e\n                  \u003c/MDBDropdownItem\u003e\n                  \u003cMDBDropdownItem\u003e\n                    \u003cMDBDropdownLink href=\"#\"\u003eAnother news\u003c/MDBDropdownLink\u003e\n                  \u003c/MDBDropdownItem\u003e\n                  \u003cMDBDropdownItem\u003e\n                    \u003cMDBDropdownLink href=\"#\"\u003eSomething else here\u003c/MDBDropdownLink\u003e\n                  \u003c/MDBDropdownItem\u003e\n                \u003c/MDBDropdownMenu\u003e\n              \u003c/MDBDropdown\u003e\n            \u003c/MDBNavbarItem\u003e\n\n\n            \u003cMDBNavbarItem className='me-3 me-lg-0'\u003e\n              \u003cMDBNavbarLink href='#'\u003e\n                \u003cMDBIcon fas icon='fill-drip' /\u003e\n              \u003c/MDBNavbarLink\u003e\n            \u003c/MDBNavbarItem\u003e\n            \u003cMDBNavbarItem className='me-3 me-lg-0'\u003e\n              \u003cMDBNavbarLink href='#'\u003e\n                \u003cMDBIcon fab icon='github' /\u003e\n              \u003c/MDBNavbarLink\u003e\n            \u003c/MDBNavbarItem\u003e\n\n            \u003cMDBNavbarItem className='me-3 me-lg-0 d-flex align-items-center'\u003e\n              \u003cMDBDropdown\u003e\n\n                \u003cMDBDropdownToggle tag=\"a\" href=\"#!\" className=\"hidden-arrow nav-link\"\u003e\n                  \u003cimg src=\"https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg\" className=\"rounded-circle\" height=\"22\" alt=\"\" loading=\"lazy\" /\u003e\n                \u003c/MDBDropdownToggle\u003e\n\n                \u003cMDBDropdownMenu\u003e\n                  \u003cMDBDropdownItem\u003e\n                    \u003cMDBDropdownLink href=\"#\"\u003eMy profile\u003c/MDBDropdownLink\u003e\n                  \u003c/MDBDropdownItem\u003e\n                  \u003cMDBDropdownItem\u003e\n                    \u003cMDBDropdownLink href=\"#\"\u003eSettings\u003c/MDBDropdownLink\u003e\n                  \u003c/MDBDropdownItem\u003e\n                  \u003cMDBDropdownItem\u003e\n                    \u003cMDBDropdownLink href=\"#\"\u003eLogout\u003c/MDBDropdownLink\u003e\n                  \u003c/MDBDropdownItem\u003e\n                \u003c/MDBDropdownMenu\u003e\n              \u003c/MDBDropdown\u003e\n            \u003c/MDBNavbarItem\u003e\n          \u003c/MDBNavbarNav\u003e\n\n        \u003c/MDBContainer\u003e\n      \u003c/MDBNavbar\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n```css\nbody {\n  background-color: #fbfbfb;\n}\n\n@media (min-width: 992px) {\n  .sidebar {\n    height: unset!important;\n  }\n}\n\n/* Sidebar */\n.sidebar {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  padding: 58px 0 0;\n  /* Height of navbar */\n  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);\n  width: 240px;\n  /* z-index: 600; */\n}\n\n.sidebar.show {\n  height: 100vh;\n}\n\n@media (max-width: 992px) {\n  .sidebar {\n    width: 100%;\n  }\n}\n\n.sidebar .active {\n  border-radius: 5px;\n  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);\n}\n\n.sidebar-sticky {\n  position: relative;\n  top: 0;\n  height: calc(100vh - 48px);\n  padding-top: 0.5rem;\n  overflow-x: hidden;\n  overflow-y: auto;\n  /* Scrollable contents if viewport is shorter than content. */\n}\n```\n\n## How to use?\n\n1. Download MDB React - free UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n## More examples\n\n[React Sidebar Collapse:\n![React Sidebar Collapse](https://mdbootstrap.com/img/Marketing/github/side-navbar/collapse.png)](https://mdbootstrap.com/docs/react/extended/sidebar/#section-collapse)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-sidebar/lists"}