⭐️

【Polaris和訳】Components/Navigation②

2021/11/06に公開約75,300字

この記事について

この記事は、Polaris/Components/Navigationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Navigation

ナビゲーションコンポーネントは、アプリケーションのフレームのサイドバーに主要なナビゲーションを表示するために使用されます。ナビゲーションには、マーチャントがアプリケーションのセクション間を移動するために使用するリンクのリストが含まれます。

Basic navigation

フレーム内にナビゲーションメニューを表示する場合に使用します。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
        badge: "15",
      },
      {
        url: "/path/to/place",
        label: "Products",
        icon: ProductsMajor,
      },
    ]}
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span>
              <div class="Polaris-Navigation__Badge">
                <span class="Polaris-Badge Polaris-Badge--statusNew Polaris-Badge--sizeSmall"
                  ><span class="Polaris-VisuallyHidden">New </span>15</span
                >
              </div>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Products</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

セクションに関連する副次的なアクションを提示し、セクションのタイトルに使用します。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
        badge: "15",
      },
      {
        url: "/admin/products",
        label: "Products",
        icon: ProductsMajor,
        selected: true,
        subNavigationItems: [
          {
            url: "/admin/products",
            disabled: false,
            selected: true,
            label: "All products",
          },
          {
            url: "/admin/products/inventory",
            disabled: false,
            label: "Inventory",
          },
        ],
      },
    ]}
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item Polaris-Navigation__Item--selected Polaris-Navigation--subNavigationActive"
              tabindex="0"
              href="/"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span>
              <div class="Polaris-Navigation__Badge">
                <span class="Polaris-Badge Polaris-Badge--statusNew Polaris-Badge--sizeSmall"
                  ><span class="Polaris-VisuallyHidden">New </span>15</span
                >
              </div>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item Polaris-Navigation--subNavigationActive"
              tabindex="0"
              aria-expanded="true"
              aria-controls="PolarisSecondaryNavigation15"
              href="/admin/products"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Products</span>
            </a>
          </div>
          <div class="Polaris-Navigation__SecondaryNavigation Polaris-Navigation--isExpanded">
            <div
              id="PolarisSecondaryNavigation15"
              class="Polaris-Collapsible"
              aria-expanded="true"
              style="transition-duration: 0ms; transition-timing-function: linear; max-height: none; overflow: visible;"
            >
              <ul class="Polaris-Navigation__List">
                <li class="Polaris-Navigation__ListItem">
                  <div class="Polaris-Navigation__ItemWrapper">
                    <a
                      class="Polaris-Navigation__Item Polaris-Navigation__Item--selected Polaris-Navigation--subNavigationActive"
                      tabindex="0"
                      aria-disabled="false"
                      href="/admin/products"
                      data-polaris-unstyled="true"
                      ><span class="Polaris-Navigation__Text">All products</span></a
                    >
                  </div>
                </li>
                <li class="Polaris-Navigation__ListItem">
                  <div class="Polaris-Navigation__ItemWrapper">
                    <a
                      class="Polaris-Navigation__Item"
                      tabindex="0"
                      aria-disabled="false"
                      href="/admin/products/inventory"
                      data-polaris-unstyled="true"
                      ><span class="Polaris-Navigation__Text">Inventory</span></a
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

セクションに関連する副次的なアクションを提示し、セクションのタイトルに使用します。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
      },
      {
        url: "/path/to/place",
        label: "Products",
        icon: ProductsMajor,
      },
    ]}
  />
  <Navigation.Section
    title="Sales channels"
    items={[
      {
        url: "/path/to/place",
        label: "Online Store",
        icon: OnlineStoreMajor,
      },
    ]}
    action={{
      accessibilityLabel: "Add sales channel",
      icon: CirclePlusOutlineMinor,
      onClick: () => {},
    }}
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Products</span>
            </a>
          </div>
        </li>
      </ul>
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__SectionHeading">
          <span class="Polaris-Navigation__Text">Sales channels</span
          ><button type="button" class="Polaris-Navigation__Action" aria-label="Add sales channel">
            <span class="Polaris-Icon"
              ><span class="Polaris-VisuallyHidden"></span
              ><svg
                viewBox="0 0 20 20"
                class="Polaris-Icon__Svg"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  d="M10 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 14c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm3-7h-2V7a1 1 0 1 0-2 0v2H7a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2z"
                ></path></svg
            ></span>
          </button>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="m1.791 2.253-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"
                    ></path>
                    <path
                      d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Online Store</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

アイテムに対して、表示や追加などのメインアクションとは異なるアクションを追加する場合に使用します。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
        secondaryAction: {
          url: "/admin/orders/add",
          accessibilityLabel: "Add an order",
          icon: CirclePlusOutlineMinor,
        },
      },
      {
        url: "/path/to/place",
        label: "Products",
        icon: ProductsMajor,
      },
    ]}
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem Polaris-Navigation__ListItem--hasAction">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span> </a
            ><a
              target="_blank"
              class="Polaris-Navigation__SecondaryAction"
              tabindex="0"
              aria-label="Add an order"
              href="/admin/orders/add"
              rel="noopener noreferrer"
              data-polaris-unstyled="true"
              ><span class="Polaris-Icon"
                ><span class="Polaris-VisuallyHidden"></span
                ><svg
                  viewBox="0 0 20 20"
                  class="Polaris-Icon__Svg"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    d="M10 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 14c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm3-7h-2V7a1 1 0 1 0-2 0v2H7a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2z"
                  ></path></svg></span
            ></a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Products</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

セクション内の限られた数のアイテムを表示し、残りのアイテムを拡大するオプションを付ける場合に使用します。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
      },
      {
        url: "/path/to/place",
        label: "Products",
        icon: ProductsMajor,
      },
    ]}
    rollup={{
      after: 2,
      view: "view",
      hide: "hide",
      activePath: "/",
    }}
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__RollupSection">
          <div
            id="PolarisAdditionalItems12"
            class="Polaris-Collapsible Polaris-Collapsible--isFullyClosed"
            aria-expanded="false"
            style="max-height: 0px; overflow: hidden;"
          ></div>
          <div class="Polaris-Navigation__ListItem">
            <button
              type="button"
              class="Polaris-Navigation__Item Polaris-Navigation__RollupToggle"
              aria-label="view"
            >
              <span class="Polaris-Navigation__Icon"
                ><span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z"
                    ></path></svg></span
              ></span>
            </button>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

セクションの下に水平線を追加する場合に使用します。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
      },
      {
        url: "/path/to/place",
        label: "Products",
        icon: ProductsMajor,
      },
    ]}
  />
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Online Store",
        icon: OnlineStoreMajor,
      },
    ]}
    separator
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Products</span>
            </a>
          </div>
        </li>
      </ul>
      <ul class="Polaris-Navigation__Section Polaris-Navigation__Section--withSeparator">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="m1.791 2.253-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"
                    ></path>
                    <path
                      d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Online Store</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

この例では、ナビゲーションを構成する多くの要素が紹介されており、特にテスト目的に便利です。

Image from Gyazo

React
<Navigation location="/">
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Inactive item",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Item with indicator",
        icon: HomeMajor,
        subNavigationItems: [
          {
            url: "/path/to/place/index",
            disabled: false,
            new: true,
            label: "New item",
          },
        ],
      },
      {
        url: "/path/to/place",
        label: "External link item",
        icon: HomeMajor,
        external: true,
      },
      {
        url: "/path/to/place",
        label: "New item",
        new: true,
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Badged item",
        badge: "Old",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Active with secondary action",
        icon: OrdersMajor,
        selected: true,
        secondaryAction: {
          url: "/admin/orders/add",
          accessibilityLabel: "Add an order",
          icon: CirclePlusOutlineMinor,
        },
      },
      {
        url: "/admin/products",
        label: "Active item with sub navigation",
        icon: ProductsMajor,
        selected: true,
        subNavigationItems: [
          {
            url: "/admin/products",
            disabled: false,
            selected: true,
            label: "Selected sub item",
          },
          {
            url: "/admin/products/transfers",
            disabled: false,
            label: "Default sub item",
          },
          {
            url: "/admin/products/inventory",
            disabled: true,
            label: "Disabled sub item",
          },
        ],
      },
      {
        url: "/path/to/place",
        label: "Disabled item",
        icon: CustomersMajor,
        disabled: true,
      },
      {
        url: "/path/to/place",
        label: "Overflow item",
        icon: MarketingMajor,
      },
    ]}
    rollup={{
      after: 7,
      view: "view",
      hide: "hide",
      activePath: "/",
    }}
  />
  <Navigation.Section
    title="These icons should have the same color"
    items={[
      {
        url: "/path/to/place",
        label: "Icon as svg",
        icon: OnlineStoreMajor,
      },
      {
        url: "/path/to/place",
        label: "Icon as img",
        icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.791 2.253l-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"></path><path d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"></path></svg>',
      },
      {
        url: "/path/to/place",
        label: "Other secondary action",
        icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M2.771 14.055A8 8 0 1 1 16 8c0 2.385-1.086 4.629-2.704 5.983A7.956 7.956 0 0 1 7.991 16c-.613 0-2.022-.003-5-.01h-.928l.708-1.935zm5.973-6.757c-.554-.302-.837-.565-.837-.92 0-.446.4-.735 1.017-.735a3.62 3.62 0 0 1 1.365.302l.502-1.577S10.328 4 8.963 4C7.057 4 5.73 5.117 5.73 6.68c0 .894.618 1.565 1.442 2.05.67.382.901.658.901 1.065 0 .42-.334.762-.952.762-.915 0-1.79-.486-1.79-.486l-.54 1.577s.797.552 2.15.552c1.956 0 3.373-.986 3.373-2.76-.013-.959-.721-1.642-1.571-2.142z"/></svg>',
        secondaryAction: {
          url: "/path/to/place/view",
          accessibilityLabel: "View your online store",
          icon: ViewMinor,
        },
      },
    ]}
    action={{
      accessibilityLabel: "Add sales channel",
      icon: CirclePlusOutlineMinor,
      onClick: () => {},
    }}
    separator
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Inactive item</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              aria-expanded="false"
              aria-controls="PolarisSecondaryNavigation61"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text"
                >Item with indicator<span class="Polaris-Navigation__Indicator"
                  ><span class="Polaris-Indicator Polaris-Indicator--pulseIndicator"></span></span
              ></span>
            </a>
          </div>
          <div class="Polaris-Navigation__SecondaryNavigation">
            <div
              id="PolarisSecondaryNavigation61"
              class="Polaris-Collapsible Polaris-Collapsible--isFullyClosed"
              aria-expanded="false"
              style="transition-duration: 0ms; transition-timing-function: linear; max-height: 0px; overflow: hidden;"
            ></div>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              target="_blank"
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              rel="noopener noreferrer"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">External link item</span>
              <div class="Polaris-Navigation__ExternalIcon">
                <span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"
                  ><span class="Polaris-VisuallyHidden">(opens a new window)</span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L13.586 5H12a1 1 0 0 1-1-1zM3 6.5A1.5 1.5 0 0 1 4.5 5H8a1 1 0 0 1 0 2H5v8h8v-3a1 1 0 1 1 2 0v3.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 3 15.5v-9z"
                    ></path></svg
                ></span>
              </div>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">New item</span>
              <div class="Polaris-Navigation__Badge">
                <span class="Polaris-Badge Polaris-Badge--statusNew Polaris-Badge--sizeSmall"
                  ><span class="Polaris-VisuallyHidden">New </span>New</span
                >
              </div>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Badged item</span>
              <div class="Polaris-Navigation__Badge">
                <span class="Polaris-Badge Polaris-Badge--statusNew Polaris-Badge--sizeSmall"
                  ><span class="Polaris-VisuallyHidden">New </span>Old</span
                >
              </div>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem Polaris-Navigation__ListItem--hasAction">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item Polaris-Navigation__Item--selected Polaris-Navigation--subNavigationActive"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Active with secondary action</span> </a
            ><a
              target="_blank"
              class="Polaris-Navigation__SecondaryAction"
              tabindex="0"
              aria-label="Add an order"
              href="/admin/orders/add"
              rel="noopener noreferrer"
              data-polaris-unstyled="true"
              ><span class="Polaris-Icon"
                ><span class="Polaris-VisuallyHidden"></span
                ><svg
                  viewBox="0 0 20 20"
                  class="Polaris-Icon__Svg"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    d="M10 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 14c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm3-7h-2V7a1 1 0 1 0-2 0v2H7a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2z"
                  ></path></svg></span
            ></a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item Polaris-Navigation--subNavigationActive"
              tabindex="0"
              aria-expanded="true"
              aria-controls="PolarisSecondaryNavigation67"
              href="/admin/products"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Active item with sub navigation</span>
            </a>
          </div>
          <div class="Polaris-Navigation__SecondaryNavigation Polaris-Navigation--isExpanded">
            <div
              id="PolarisSecondaryNavigation67"
              class="Polaris-Collapsible"
              aria-expanded="true"
              style="transition-duration: 0ms; transition-timing-function: linear; max-height: none; overflow: visible;"
            >
              <ul class="Polaris-Navigation__List">
                <li class="Polaris-Navigation__ListItem">
                  <div class="Polaris-Navigation__ItemWrapper">
                    <a
                      class="Polaris-Navigation__Item Polaris-Navigation__Item--selected Polaris-Navigation--subNavigationActive"
                      tabindex="0"
                      aria-disabled="false"
                      href="/admin/products"
                      data-polaris-unstyled="true"
                      ><span class="Polaris-Navigation__Text">Selected sub item</span></a
                    >
                  </div>
                </li>
                <li class="Polaris-Navigation__ListItem">
                  <div class="Polaris-Navigation__ItemWrapper">
                    <a
                      class="Polaris-Navigation__Item"
                      tabindex="0"
                      aria-disabled="false"
                      href="/admin/products/transfers"
                      data-polaris-unstyled="true"
                      ><span class="Polaris-Navigation__Text">Default sub item</span></a
                    >
                  </div>
                </li>
                <li class="Polaris-Navigation__ListItem">
                  <div class="Polaris-Navigation__ItemWrapper">
                    <a
                      class="Polaris-Navigation__Item Polaris-Navigation__Item--disabled"
                      tabindex="-1"
                      aria-disabled="true"
                      href="/admin/products/inventory"
                      data-polaris-unstyled="true"
                      ><span class="Polaris-Navigation__Text">Disabled sub item</span></a
                    >
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="Polaris-Navigation__RollupSection">
          <div
            id="PolarisAdditionalItems19"
            class="Polaris-Collapsible Polaris-Collapsible--isFullyClosed"
            aria-expanded="false"
            style="max-height: 0px; overflow: hidden;"
          ></div>
          <div class="Polaris-Navigation__ListItem">
            <button
              type="button"
              class="Polaris-Navigation__Item Polaris-Navigation__RollupToggle"
              aria-label="view"
            >
              <span class="Polaris-Navigation__Icon"
                ><span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z"
                    ></path></svg></span
              ></span>
            </button>
          </div>
        </li>
      </ul>
      <ul class="Polaris-Navigation__Section Polaris-Navigation__Section--withSeparator">
        <li class="Polaris-Navigation__SectionHeading">
          <span class="Polaris-Navigation__Text">These icons should have the same color</span
          ><button type="button" class="Polaris-Navigation__Action" aria-label="Add sales channel">
            <span class="Polaris-Icon"
              ><span class="Polaris-VisuallyHidden"></span
              ><svg
                viewBox="0 0 20 20"
                class="Polaris-Icon__Svg"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  d="M10 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 14c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zm3-7h-2V7a1 1 0 1 0-2 0v2H7a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0-2z"
                ></path></svg
            ></span>
          </button>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="m1.791 2.253-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"
                    ></path>
                    <path
                      d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Icon as svg</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><img
                    class="Polaris-Icon__Img"
                    src='data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.791 2.253l-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"></path><path d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"></path></svg>'
                    alt=""
                    aria-hidden="true"
                /></span>
              </div>
              <span class="Polaris-Navigation__Text">Icon as img</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem Polaris-Navigation__ListItem--hasAction">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><img
                    class="Polaris-Icon__Img"
                    src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M2.771 14.055A8 8 0 1 1 16 8c0 2.385-1.086 4.629-2.704 5.983A7.956 7.956 0 0 1 7.991 16c-.613 0-2.022-.003-5-.01h-.928l.708-1.935zm5.973-6.757c-.554-.302-.837-.565-.837-.92 0-.446.4-.735 1.017-.735a3.62 3.62 0 0 1 1.365.302l.502-1.577S10.328 4 8.963 4C7.057 4 5.73 5.117 5.73 6.68c0 .894.618 1.565 1.442 2.05.67.382.901.658.901 1.065 0 .42-.334.762-.952.762-.915 0-1.79-.486-1.79-.486l-.54 1.577s.797.552 2.15.552c1.956 0 3.373-.986 3.373-2.76-.013-.959-.721-1.642-1.571-2.142z"/></svg>'
                    alt=""
                    aria-hidden="true"
                /></span>
              </div>
              <span class="Polaris-Navigation__Text">Other secondary action</span> </a
            ><a
              target="_blank"
              class="Polaris-Navigation__SecondaryAction"
              tabindex="0"
              aria-label="View your online store"
              href="/path/to/place/view"
              rel="noopener noreferrer"
              data-polaris-unstyled="true"
              ><span class="Polaris-Icon"
                ><span class="Polaris-VisuallyHidden"></span
                ><svg
                  viewBox="0 0 20 20"
                  class="Polaris-Icon__Svg"
                  focusable="false"
                  aria-hidden="true"
                >
                  <path
                    d="M17.928 9.628C17.837 9.399 15.611 4 10 4S2.162 9.399 2.07 9.628a1.017 1.017 0 0 0 0 .744C2.163 10.601 4.389 16 10 16s7.837-5.399 7.928-5.628a1.017 1.017 0 0 0 0-.744zM10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 .002 4.001A2 2 0 0 0 9.999 8z"
                  ></path></svg></span
            ></a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

この例では、nav 要素に隠しラベルを追加するために、aria-labelledby を追加しています。

Image from Gyazo

React
<Navigation location="/" ariaLabelledBy="label-id">
  <VisuallyHidden>
    <p id="label-id">Hidden label</p>
  </VisuallyHidden>
  <Navigation.Section
    items={[
      {
        url: "/path/to/place",
        label: "Home",
        icon: HomeMajor,
      },
      {
        url: "/path/to/place",
        label: "Orders",
        icon: OrdersMajor,
        badge: "15",
      },
      {
        url: "/path/to/place",
        label: "Products",
        icon: ProductsMajor,
      },
    ]}
  />
</Navigation>
HTML
<div>
  <nav class="Polaris-Navigation" aria-labelledby="label-id">
    <div
      class="Polaris-Navigation__PrimaryNavigation Polaris-Scrollable Polaris-Scrollable--vertical"
      data-polaris-scrollable="true"
    >
      <span class="Polaris-VisuallyHidden">
        <p id="label-id">Hidden label</p>
      </span>
      <ul class="Polaris-Navigation__Section">
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M18 7.261V17.5c0 .841-.672 1.5-1.5 1.5h-2c-.828 0-1.5-.659-1.5-1.5V13H7v4.477C7 18.318 6.328 19 5.5 19h-2c-.828 0-1.5-.682-1.5-1.523V7.261a1.5 1.5 0 0 1 .615-1.21l6.59-4.82a1.481 1.481 0 0 1 1.59 0l6.59 4.82A1.5 1.5 0 0 1 18 7.26z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Home</span>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M11 1a1 1 0 1 0-2 0v7.586L7.707 7.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 8.586V1z"
                    ></path>
                    <path
                      d="M3 14V3h4V1H2.5A1.5 1.5 0 0 0 1 2.5v15A1.5 1.5 0 0 0 2.5 19h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 17.5 1H13v2h4v11h-3.5c-.775 0-1.388.662-1.926 1.244l-.11.12A1.994 1.994 0 0 1 10 16a1.994 1.994 0 0 1-1.463-.637l-.111-.12C7.888 14.664 7.275 14 6.5 14H3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Orders</span>
              <div class="Polaris-Navigation__Badge">
                <span class="Polaris-Badge Polaris-Badge--statusNew Polaris-Badge--sizeSmall"
                  ><span class="Polaris-VisuallyHidden">New </span>15</span
                >
              </div>
            </a>
          </div>
        </li>
        <li class="Polaris-Navigation__ListItem">
          <div class="Polaris-Navigation__ItemWrapper">
            <a
              class="Polaris-Navigation__Item"
              tabindex="0"
              href="/path/to/place"
              data-polaris-unstyled="true"
            >
              <div class="Polaris-Navigation__Icon">
                <span class="Polaris-Icon"
                  ><span class="Polaris-VisuallyHidden"></span
                  ><svg
                    viewBox="0 0 20 20"
                    class="Polaris-Icon__Svg"
                    focusable="false"
                    aria-hidden="true"
                  >
                    <path
                      d="M10.293 1.293A1 1 0 0 1 11 1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-.293.707l-9 9a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414l9-9zM15.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
                    ></path></svg
                ></span>
              </div>
              <span class="Polaris-Navigation__Text">Products</span>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

ariaLabelledBy
string
aria-labelledby として使用される要素の id

children
React.ReactNode

contextControl
React.ReactNode

locationRequired
string

onDismiss
() => void

必要なコンポーネント

ナビゲーションコンポーネントは、フレームコンポーネントに渡す必要があります。モバイル版のナビゲーションコンポーネントは、トップバーコンポーネントに表示されます。

ベストプラクティス

ナビゲーションコンポーネントは

  • クリックするとアクションを実行する主要なナビゲーションアイテムを含むこと。各アクションは、URL に移動するか、モーダルオーバーレイのような別のアクションを引き起こす必要があります。
  • セカンダリーアクションは、プライマリーアクションの補助的な動作にのみ使用する。
  • セクションやアイテムの副次的なアクションとして、プライマリではないリンクやアクションを提供する。
  • 関連するカテゴリーに基づいて、ナビゲーションアイテムをセクションにグループ化する。
  • セクションのカテゴリーを明確にするために、セクションのタイトルを使用する。
  • アイテムのアクションにはメジャーアイコンを使用する。
  • セカンダリーアクションには、マイナーアイコンを使用します。
  • ナビゲーションアイテムをグループ化するには、提供されているナビゲーションセクションコンポーネントを使用します。

コンテンツのガイドライン

ナビゲーションは

  • プライマリおよびセカンダリのナビゲーションアイテムには文例を使用する

Image from Gyazo

  • 各アイテムのラベルの説明には、できるだけ少ない単語を使用する

Image from Gyazo

  • セクションのラベルにはすべて大文字を使用してください

Image from Gyazo

ナビゲーションセクション

ナビゲーションセクションは、関連するナビゲーションアイテムをまとめたものです。ナビゲーションセクションは、見出しを付けて明確にすることができます。マーチャントはセクションを使って、特定のカテゴリー内のナビゲーションアイテムを簡単に見つけることができます。

セクションのプロパティ

プロップ タイプ 説明
items Item[] セクションの中でレンダリングされるナビゲーションアイテムのコレクション
icon IconProps['s source'] セクションのタイトルの隣に表示されるアイコンです。
title string ナビゲーションセクションのタイトルを提供する文字列プロパティ
fill boolean セクションが利用可能な垂直方向のスペースをすべて占めるべきかどうかを示すブーリアンプロパティ
rollup Rollup[] ナビゲーションセクションの折りたたみ動作を決定するオブジェクトです。
action Action[] アイコンのみのアクションを、セクションタイトルの横に補助的にレンダリングします。
separator boolean セクションが視覚的なセパレータを持つべきかどうかを示すブーリアンプロパティ

ナビゲーションセクションの項目

ナビゲーションコンポーネントのコンテンツは、ナビゲーションアイテムで構成されています。各アイテムは、マーチャントが取ることのできるリンクまたはアクションです。

アイテムのプロパティ

プロップ タイプ 説明
url string ナビゲーションアイテムがクリックされたときに移動する場所。
matches boolean 一致するロケーションプロパティにナビゲーションアイテムが反応するかどうかを示す boolean プロパティ
exactMatch boolean ナビゲーションアイテムが完全に一致するロケーションプロパティに反応すべきかどうかを示すブーリアンプロパティ
matchPaths string[] ナビゲーションアイテムが応答するための追加パスのコレクションを提供する文字列プロパティ
excludePaths string[] ナビゲーションアイテムが応答すべきではないパスの明示的なコレクションを提供する文字列プロパティ
icon IconProps['s source'] ナビゲーションアイテムの隣に表示されるアイコンです。
badge string | null ナビゲーションアイテムの横にバッジで表示されるコンテンツを許可する文字列プロパティ。
label string ナビゲーションアイテムのリンクテキストとして表示されるコンテンツを許可する文字列プロパティ。
disabled boolean ナビゲーションアイテムが無効化されているかどうかを示すブーリアンプロパティ。
new boolean ナビゲーションアイテムが新しいかどうかを、親とアイテムへのバッジにインジケータドットを追加することで示す(バッジのプロップで上書きされる)。
accessibilityLabel string スクリーンリーダーがナビゲーションアイテムの内容を理解するための、視覚的に隠されたラベル。
selected boolean ナビゲーションアイテムが現在選択されているアイテムであるかどうかを示すブーリアンプロパティ
subNavigationItems SubNavigationItem[] ネストされたセカンダリーナビゲーションアイテムとしてレンダリングされたナビゲーションアイテムのコレクションです。
secondaryAction SecondaryAction ナビゲーションアイテムの隣に補助的なアクションとしてアイコンのみのアクションをレンダリングする
onClick() function ナビゲーションアイテムのクリックを処理するためのコールバック関数

ナビゲーションセクションのロールアップ

ロールアップでは、ナビゲーションセクションのアイテムをロールアップして、マーチャントが使用するときに表示することができます。

ロールアップのプロパティ

プロップ タイプ 説明
after number ナビゲーションセクションが折りたたまれるべきアイテムの数
view string セクションビューアクションのコンテンツを提供する文字列プロパティ
hide string セクションの非表示アクションのためのコンテンツを提供する文字列プロパティ
activePath string アプリケーションの現在の URL を表す文字列プロパティ

ナビゲーションセクションのアクション

セクションのタイトルの横に表示される、アイコンのみの補完的なアクションです。

アクションのプロパティ

プロップ タイプ 説明
icon IconProps['s source'] アクションのコンテンツとして表示されるアイコンです。
accessibilityLabel string スクリーンリーダーがアクションの内容を理解するための視覚的に隠されたラベル
onClick() function アクションのクリックを処理するためのコールバック関数

関連コンポーネント

  • 左サイドバーとトップバーを含むナビゲーションコンポーネントの構造を提供するには、フレームコンポーネントを使用します。
  • ナビゲーションコンポーネントを小さな画面に表示したり、検索やユーザーメニューを提供したり、フレームコンポーネントにテーマを設定してアプリケーションのブランドを反映したりするには、トップバーコンポーネントを使用します。
  • マーチャントがページ上のフォームに変更を加えたときのオプションを伝えるには、コンテクストセーブバーコンポーネントを使用します。
  • アクションの結果を一目でわかるように素早くフィードバックするには、トーストコンポーネントを使用します。
  • ページの読み込み中やアップロードの処理中をマーチャントに知らせるには、loading コンポーネントを使用します。
  • 同一コンテキスト内で関連するビューを交互に表示するには、Tabs コンポーネントを使用します。
  • 1 つのアクションやリンクを大きなテキストスパンの中に埋め込むには、link コンポーネントを使用します。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます