How do I make a live home button with App Bridge Title Bar and Breadcrumbs?

[pawel_experify]

Hi, I am developing Shopify App, I started from Remix template and trying to apply some Design Suggestions from Shopify. I am having problem with Title Bar. I would like to use Title Bar from App Bridge with Breadcrumbs (https://shopify.dev/docs/api/app-bridge-library/reference/title-bar#example-title-bar-with-breadcrum...). The docs is not super helpful with only example:

<ui-title-bar title="Products">
  <button variant="breadcrumb">Home</button>
</ui-title-bar>

how to make this button "live" and make it working (changing page to home page)?

Sorry if that's stupid question, I am just starting 😅

[00Sarah00]

Hi

Just in case somebody is still looking for the answer to this question.

First the <button> element is a child of the <ui-title-bar> element. So, you need to put <button> inside the <ui-title-bar> element like so:

<ui-title-bar>
  <button>Some button</button>
</ui-title-bar>

Second, the <button> child element has attributes in addition to its base attributes. The attributes are:

1- variant: "breadcrumb" or "primary"

2- tone: "critical"  or "default"

See these info in https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar and next to "children" click on "UITitleBarChildren"

Now here is the code to make the breadcrumb.

In the child page add:

import { useNavigate } from "@remix-run/react";
export default function childPage() {
  const navigate = useNavigate();
  return (
    <Page>
      <ui-title-bar title="Child Page">
        <button variant="breadcrumb" onClick={() => navigate("/app")}>
          Home
        </button>
      </ui-title-bar>
      <Layout>
        <Layout.Section>
...... etc.

the "/app" will take you to the homepage of your app..

Happy developing 🙂