Change the Position of the Notification Inbox

The notification inbox position is powered by the popper library. Therefore, you can use popper's offset modifier to displace the notification inbox from the bell by setting the popperOptions property on the FloatingNotificationInbox component.

The offset option accepts an array with two numbers in the form: [distance along the bell, distance away from the bell]. This is a full example:

React
import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  const distanceAlongRef = 16;
  const distanceAwayFromRef = 32;

  return (
    
      {(props) => (
        
      )}
    
  );
}