⭐️
【Polaris和訳】Components/Navigation②
この記事について
この記事は、Polaris/Components/Navigationの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Navigation
ナビゲーションコンポーネントは、アプリケーションのフレームのサイドバーに主要なナビゲーションを表示するために使用されます。ナビゲーションには、マーチャントがアプリケーションのセクション間を移動するために使用するリンクのリストが含まれます。
Basic navigation
フレーム内にナビゲーションメニューを表示する場合に使用します。
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>
Navigation with an activ secondary navigation item
セクションに関連する副次的なアクションを提示し、セクションのタイトルに使用します。
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>
Navigation with a secondary action for a section and a section title
セクションに関連する副次的なアクションを提示し、セクションのタイトルに使用します。
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>
Navigation with a secondary action for an item
アイテムに対して、表示や追加などのメインアクションとは異なるアクションを追加する場合に使用します。
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>
Navigation with section rollup
セクション内の限られた数のアイテムを表示し、残りのアイテムを拡大するオプションを付ける場合に使用します。
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>
Navigation with section separator
セクションの下に水平線を追加する場合に使用します。
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>
Navigation with various status and secondary elements
この例では、ナビゲーションを構成する多くの要素が紹介されており、特にテスト目的に便利です。
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>
Navigation with aria-labelledby
この例では、nav 要素に隠しラベルを追加するために、aria-labelledby を追加しています。
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 に移動するか、モーダルオーバーレイのような別のアクションを引き起こす必要があります。
- セカンダリーアクションは、プライマリーアクションの補助的な動作にのみ使用する。
- セクションやアイテムの副次的なアクションとして、プライマリではないリンクやアクションを提供する。
- 関連するカテゴリーに基づいて、ナビゲーションアイテムをセクションにグループ化する。
- セクションのカテゴリーを明確にするために、セクションのタイトルを使用する。
- アイテムのアクションにはメジャーアイコンを使用する。
- セカンダリーアクションには、マイナーアイコンを使用します。
- ナビゲーションアイテムをグループ化するには、提供されているナビゲーションセクションコンポーネントを使用します。
コンテンツのガイドライン
ナビゲーションは
- プライマリおよびセカンダリのナビゲーションアイテムには文例を使用する
- 各アイテムのラベルの説明には、できるだけ少ない単語を使用する
- セクションのラベルにはすべて大文字を使用してください
ナビゲーションセクション
ナビゲーションセクションは、関連するナビゲーションアイテムをまとめたものです。ナビゲーションセクションは、見出しを付けて明確にすることができます。マーチャントはセクションを使って、特定のカテゴリー内のナビゲーションアイテムを簡単に見つけることができます。
セクションのプロパティ
| プロップ | タイプ | 説明 |
|---|---|---|
| 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 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion