Skip to content
Patternfly Logo

Notification drawer

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.


  • Focus must be manually managed when the NotificationDrawer component is opened:

    1. Create a React ref and pass it into the NotificationDrawer component's ref attribute
    2. Pass in a function to the onNotificationDrawerExpand prop of the Page component that will place focus on the first interact-able element inside the NotificationDrawer component via the previously created ref


Basic screenshot


When using the NotificationDrawerGroupList and related components, the function that is passed in to the onNotificationDrawerExpand prop on the Page component must also ensure the NotificationDrawer component only receives focus when it is initially opened. Otherwise any time a drawer group item is opened the NotificationDrawer component will receive focus, which would be unexpected behavior for users.

Grouped screenshot

View source on GitHub