Skip to content
PatternFly logo

Notification drawer

A notification drawer is a place where users can view and manage notifications that are generated by the system. It allows them to see a list of notifications without the need to navigate away from the current screen.

Demos

  • 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

Basic screenshot

Grouped

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines