Updated 18 December 2024
Top bar 
Updated 18 Dec 2024View Figma
The top bar is a header component that allows merchants to search, access menus, and navigate by clicking on the logo. It’s always visible at the top of interfaces like Shopify or Shopify Plus. Third-party apps that use the top bar can customize the color to match their brand using the app provider component and are required to use their own logo.
Properties
Width
Sets a min and max width on the top bar to show how content displays at different breakpoints.
Top bar(3 variants)
Figma notes
Merchants can use the top bar component to search, access menus, and navigate by clicking on the logo. It’s always visible at the top of interfaces like Shopify or Shopify Plus. Third-party apps that use the top bar can customize the color to match their brand using the app provider component and are required to use their own logo.
Polaris React: