Vercel Toolbar

The Vercel Toolbar appears on all Preview Deployments by default, and can be added to any Deployment using our npm package.

It enables your team to:

• Leave feedback on your production environment with Comments
• Navigate to useful dashboard pages
• Share your deployment

While logged into the toolbar, you can navigate to many of the project and deployment settings by:

• Selecting the Menu icon in the Vercel Toolbar (☰)
• Entering ⇧k (cmd+shift+k or ctrl+shift+k on Windows). See the Using your own CMD + K feature section if your app already implements a k shortcut

Doing so will open a menu that allows you to navigate to useful pages and tools, such as:

• All Deployments
• Storage
• Logs
• Speed Insights
• Layout shift tool
• and more

The layout shift tool gives you insight into any elements that may cause layout shifts on the page. The cause for a layout shift could be many things:

• Elements that change in height or width
• Custom font loading
• Media embeds (images, iframes, videos, etc.) that do not have set dimensions
• Dynamic content that's injected at runtime
• Animations that affect layout

Layout shifts play a part in Core Web Vitals and contribute to Speed Insights scores. With the layout shift tool, you can see which elements are contributing to a layout shift and by how much.

To access the layout shift tool:

1. Open the Command Menu
2. Select the Layout Shifts option. If there are layout shifts detected on the page, a badge will display next to the option. The number inside the badge details the number of shifts detected
3. The Layout Shifts popover will open on the right side of the screen. Here you can filter, inspect, and replay any detected layout shifts

Each shift details its impact, the responsible element, and a description of the shift if available. For example, "became taller when its text changed and shifted another element". Hovering over a layout shift will higlight the affected element. You can also replay layout shifts to get a better understanding of what's happening.

You can replay a layout shift by either:

• Double-clicking it
• Selecting it and using the Replay selected shift button

You can also select more than one shift and play them at the same time. You may want to do this to see the combined effect of element shifts on the page.

When you replay layout shifts, the Vercel Toolbar will become your stop button. Press this to stop replaying layout shifts. Alternatively, press the esc key.

You can also disable layout shift detection on a per element basis. You can do this by adding a data-allow-shifts attribute to an element. This will affect the element and its descendants.

To disable the layout shift tool completely:

1. Open the Command Menu
2. Select Preferences
3. Toggle the setting for Layout Shift Detection

If your app already has a k (cmd+k or ctrl+k on Windows) feature, you can still open your menu by:

• Adding event.preventDefault() to the handler that toggles the menu, to prevent Vercel's Command Menu from opening with the k shortcut
• Using ⇧k (cmd+shift+k or ctrl+shift+k on Windows) to open Vercel's Command Menu

Deployments with the Vercel Toolbar enabled, and all Preview Deployments, have a Share button which can be used to share your Deployment's generated URL.

If you're on an Enterprise team, you will be able to see who shared deployment URLs in your audit logs.