DocsChangelog

Changelog

All notable changes to this project are documented here. The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

This page mirrors CHANGELOG.md in the repository.

[2.0.0] — unreleased

Breaking release. See the Migration Guide for upgrade steps.

Removed

  • [Sidebar] Removed the ProSidebarProvider component (deprecated since 1.1)
  • Removed the useProSidebar hook (deprecated since 1.1) — use Sidebar props instead
  • [Sidebar] Removed the defaultCollapsed prop — use the controlled collapsed prop
  • [Sidebar] Removed the breakPoint="always" value — use breakPoint="all"
  • [Sidebar] Removed the customBreakPoint prop — pass a custom value to breakPoint instead (e.g. breakPoint="450px")

Changed

  • Breaking: React peer dependency is now >=18 (dropped React 16 / 17 support); React 19 is supported
  • Runtime dependencies (@emotion, @popperjs, classnames) are now externalized instead of bundled, reducing install size and avoiding duplicate copies
  • The package now ships a proper exports map with ESM (dist/index.mjs), CJS (dist/index.js) and a types entry

Added

  • [Menu] New popover prop — top-level SubMenus open as floating poppers even when the sidebar is expanded (instead of sliding open inline)
  • [Menu] New accordion prop — when set, only one top-level SubMenu can be open at a time. Opening another closes the previously open one
  • [SubMenu] New accordion prop — coordinates only the submenu’s direct children (per-level scope, independent of any ancestor accordion)
  • [SubMenu] Active state now cascades automatically — a SubMenu is marked active whenever any of its descendants is active
  • [Sidebar] Pressing Escape now closes the sidebar when open as an overlay (broken + toggled)
  • [Sidebar] Focus moves into the sidebar when it opens as an overlay
  • [MenuItem] aria-current="page" on active items and aria-disabled on disabled items
  • [SubMenu] aria-expanded on the trigger, aria-haspopup="menu" when a collapsed top-level submenu opens as a popup, and aria-disabled on disabled triggers

Fixed

  • [Sidebar] Backdrop now uses onKeyDown and activates only on Enter / Space (replacing the deprecated onKeyPress, which fired on any key)
  • [SubMenu] Items in a closed submenu are no longer reachable via Tab or exposed to screen readers — the closed submenu content is now marked inert
  • [SubMenu] Trigger now has role="button", so its aria-expanded / aria-haspopup state is valid (it previously sat on a roleless <a>)

[1.1.0] — 2024-02-03

Fixed

  • Fixed submenu open prop not working properly (issue #210)

[1.1.0-alpha.2] — 2024-01-22

Fixed

[1.1.0-alpha.1] — 2023-05-20

Added

  • [Sidebar] Added collapsed prop
  • [Sidebar] Added toggled prop
  • [Sidebar] Added onBackdropClick prop
  • [Sidebar] Added onBreakPoint prop

Updated

  • Deprecated ProSidebarProvider and made it optional
  • Deprecated useProSidebar
  • Updated BreakPoint type to use all and deprecate always

Fixed

  • Fixed closeOnClick triggering close on nested SubMenu click
  • Fixed sidebar default states not being applied correctly when using ProSidebarProvider and useProSidebar
  • Fixed Menu’s transitionDuration collision with Sidebar’s transitionDuration

[1.0.0] — 2023-01-21

React Pro Sidebar 1.0.0 is here 🎉

For the full list of changes, browse changelogs matching 1.0.0-alpha.* and 1.0.0-beta.* below.

[1.0.0-beta.3] — 2023-01-20

  • [SubMenu] fixed popper placement on RTL

[1.0.0-beta.2] — 2023-01-14

  • [Menu] Added transitionDuration prop to use when sliding submenu content

[1.0.0-beta.1] — 2023-01-13

  • [MenuItem] Removed routerLink prop in favor of component
  • [SubMenu] Added component prop

[1.0.0-alpha.10] — 2023-01-10

  • [MenuItem] [SubMenu] Apply root classes to child nodes (Button, label, prefix, …)
  • [MenuItem] [SubMenu] Improve accessibility
  • [Sidebar] Fix sidebar border not changing when rtl is set to true

[1.0.0-alpha.9] — 2022-11-27

  • Fix build

[1.0.0-alpha.8] — 2022-11-27

  • Added rootStyles to all components
  • [Sidebar] Added backdropStyles
  • [Sidebar] Removed overlayColor prop
  • [Menu] Renamed renderMenuItemStyles to menuItemStyles (type MenuItemStyles), which now applies styles directly to MenuItem / SubMenu components and their children

Type definition:

type ElementStyles =
  | CSSObject
  | ((params: MenuItemStylesParams) => CSSObject | undefined);
 
interface MenuItemStyles {
  root?: ElementStyles;
  button?: ElementStyles;
  label?: ElementStyles;
  prefix?: ElementStyles;
  suffix?: ElementStyles;
  icon?: ElementStyles;
  subMenuContent?: ElementStyles;
  SubMenuExpandIcon?: ElementStyles;
}
  • Updated classnames. The following are the new names: ps-sidebar-root, ps-sidebar-container, ps-sidebar-image, ps-sidebar-backdrop, ps-collapsed, ps-toggled, ps-rtl, ps-broken, ps-menu-root, ps-menuitem-root, ps-submenu-root, ps-menu-button, ps-menu-prefix, ps-menu-suffix, ps-menu-label, ps-menu-icon, ps-submenu-content, ps-submenu-expand-icon, ps-disabled, ps-active, ps-open.
  • Added utility classes (sidebarClasses, menuClasses) that can be used to reference the classes above.

[1.0.0-alpha.7] — 2022-10-24

  • Added support for React Router to MenuItem via the routerLink prop

[1.0.0-alpha.6] — 2022-10-14

  • Fixed submenu content not displayed when collapsed (issue #124)

[1.0.0-alpha.4] — 2022-10-10

  • Build updates, dependency upgrades, test fixes

[1.0.0-alpha.3] — 2022-10-06

  • Fixed children prop typing

[1.0.0-alpha.2] — 2022-10-05

  • Fixed build

[1.0.0-alpha.1] — 2022-10-05

Breaking changes

  • Removed SCSS in favor of css-in-js (styled component)
  • [Sidebar] Renamed ProSidebar to Sidebar
- import { ProSidebar } from 'react-pro-sidebar';
+ import { Sidebar } from 'react-pro-sidebar';
  • [Sidebar] Removed collapsed, toggled and onToggle props (useProSidebar hook used instead)
  • [Sidebar] Added defaultCollapsed prop
  • [Sidebar] Added always option to breakPoint prop
  • [Sidebar] Added customBreakPoint prop
  • [Sidebar] Added backgroundColor prop
  • [Sidebar] Added transitionDuration prop
  • [Sidebar] Added overlayColor prop
  • [Menu] Removed iconShape, popperArrow, subMenuBullets and innerSubMenuArrows props
  • [Menu] Added renderMenuItemStyles prop for customizing MenuItem & SubMenu components
  • [Menu] Added renderExpandIcon prop
  • [Menu] Added closeOnClick prop (useful when wanting to close popper on MenuItem click when collapsed is true)
  • [MenuItem] Added disabled prop
  • [SubMenu] Added disabled prop
  • [SubMenu] Renamed title prop to label
  • Introduced ProSidebarProvider component and useProSidebar hook to access and manage sidebar state

[0.7.1] — 2021-09-23

Fixed

  • Fix submenu items bullets not showing by adding subMenuBullets and innerSubMenuArrows props to Menu to choose between arrows and bullets

[0.7.0] — 2021-09-22

Added

  • Add submenu indent variable and update default
  • Add exports for all component props
  • Add breakpoint-xxl

Updated

  • Replace submenu bullets with arrows
  • Enable icon use in submenu items

Fixed

  • Fix TypeScript property collision by omitting prefix props for li element (@zirho)

[0.6.0] — 2021-02-11

Added

  • Add width and collapsedWidth props

Fixed

  • Fix dynamically adding Menu items depending on certain conditions (@sergiovhe)
  • Fix use of styles in ProSidebar component (@sujaysudheenda)
  • Fix default props spreading

[0.5.0] — 2020-12-14

Added

Fixed

  • Fix prop spreading and update types on submenu

[0.4.4] — 2020-08-16

Fixed

  • Fix SidebarFooter styling (issue #12)
  • Fix overlapping sidebar image with overlay

[0.4.3] — 2020-07-06

Fixed

  • Fix CSS build

[0.4.2] — 2020-07-05

Fixed

[0.4.1] — 2020-06-12

Fixed

[0.4.0] — 2020-06-05

Added

  • Display arrow on hover over top-level submenu title
  • Add toggle option for sidebar and break points
  • Add popperArrow prop in Menu to specify whether to display an arrow when the sidebar is collapsed

Changed

  • Use direction: rtl instead of row-reverse

Fixed

  • Fix react-slidedown CSS import (issue #1) from @metadan
  • Fix submenu positioning on sidebar collapsed using popperjs and resize-observer-polyfill for resize event listener

[0.3.0] — 2020-05-11

Added

  • Add suffix prop to MenuItem and submenu
  • Add prefix prop to MenuItem and submenu
  • Add sidebar layout — SidebarHeader, SidebarContent, SidebarFooter

[0.2.0] — 2020-05-08

Added

  • Add open prop to submenu component
  • Add active prop to MenuItem component

Fixed

  • Fix sidebar height overflow

[0.1.1] — 2020-05-07

Fixed

  • Fix submenu visibility when collapsed

[0.1.0] — 2020-05-07

Added

  • Add defaultOpen prop to submenu component

Changed

  • Update README — merge API tables into one, use prop instead of name, add nested submenu docs

Fixed

  • Fix overflow of the sidebar content

[0.1.0-beta.1] — 2020-05-06

Initial pre-release

  • Initial pre-release of the React Pro Sidebar library
Accessibility