Reference

Vercel Toolbar

Learn how to use the Vercel Toolbar to leave feedback, navigate through important dashboard pages, share deployments, use Draft Mode for previewing unpublished content, and Edit Mode for editing content in real-time.
Table of Contents

Vercel Toolbar is available on all plans

The Vercel Toolbar is a tool that assists in the iteration and development process. Through the toolbar, you can:

The Vercel Toolbar expanded showing all icons.
The Vercel Toolbar expanded showing all icons.

The Vercel Toolbar is enabled by default for all preview deployments. You can disable the toolbar at the team, project, or session level.

You can also manage its visibility for automation with HTTP headers and through environment variables. To learn more, see Managing the toolbar.

To enable the toolbar for your local or production environments, see Adding the toolbar to your environment.

You can access the Command Menu by pressing  k (cmd+shift+k or ctrl+shift+k on Windows) on your keyboard.

If your app already implements a  k shortcut, see the Using your own CMD + K feature section.

Alternatively, you can also access the Command Menu through the Vercel Toolbar:

  1. If you haven't already, log into the toolbar by clicking the Login button.
  2. Click the Menu icon in the Vercel Toolbar .
  3. From the list, select the settings or tools that you need.
FeatureDescription
SearchQuickly search the toolbar and access dashboard pages.
Quick branch accessView the current branch and commit hash.
Switch branchesQuickly switch between branches (on preview and production branches - not locally).
Layout shiftsOpen the Layout Shift Tool to identify elements causing layout shifts.
Interaction timingInspect in detail each interaction's latency and view your current session's INP.
Accessibility audit toolAutomatically check the Web Content Accessibility Guidelines 2.1 level A and AA rules.
Open GraphView open graph properties for the page you are on and see what the link preview will look like.
CommentsAccess the Comments panel to leave or view feedback.
View inbox View all open comments.
Navigate to your teamNavigate to your team's dashboard.
Navigate to your projectNavigate to your project's dashboard.
Navigate to your deploymentNavigate to your deployment's dashboard.
Hide Toolbar Hide the toolbar.
Disable for sessionDisable the toolbar for the current session.
Set preferencesSet personal preferences for the toolbar.
LogoutLogout of the toolbar.

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

You can use the Share button in deployments with the Vercel Toolbar enabled, as well as in all preview deployments, to share your deployment's generated URL. When you use the Share button from the toolbar, the URL will contain any relevant query parameters.

To share a deployment:

  1. Go to the deployment you want to share and ensure you're logged into the Vercel Toolbar.
  2. Hover over the toolbar to display the Share Button button, and click it.
  3. From the Share dialog, ensure your're allowing the right permissions and click Copy Link to copy the deployment URL to your clipboard. To learn more, see Sharing Deployments.

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

You can reposition the toolbar by dragging it to any edge of your screen. It will snap into place and appear there across deployments until you move it again. Repositioning only affects where you see the toolbar, it does not change the toolbar position for your collaborators.

When logged into the Vercel Toolbar, you'll find a Preferences button in the Command Menu. In this menu, you can update the following settings:

SettingDescription
NotificationsSet when you will receive notifications for comments in the deployment you're viewing
ThemeSelect your color theme
Chrome ExtensionOnly visible on Chrome. Add Vercel's extension to your browser to take screenshot attachments for Comments and to enable the toolbar in production.
Shrink When InactiveProvides more control over the toolbar's visibility
Layout Shift DetectionEnable or disable the Layout Shift Tool
Accessibility AuditEnable or disable the Accessibility Audit Tool
Measure Interaction TimingEnable or disable the Interaction Timing Tool
Reset OnboardingSee tooltips above the comments toolbar explaining the functionality of each button
Last updated on October 6, 2024