Interstitial nav

As your app grows, merchants need clear paths to deeper pages without cluttering your main navigation. The interstitial nav composition provides a clean way to link to settings, features, or resources within a section.

Use this pattern on pages that serve as hubs for related functionality, like a settings overview that links to individual settings pages. This composition follows proven design guidelines that help your app feel native to the Shopify admin. See Built for Shopify requirements for more details.

Anchor to ExamplesExamples

Anchor to Display a navigation menu with drill-down rowsDisplay a navigation menu with drill-down rows

Merchants need clear paths to deeper pages (e.g. settings, features) without cluttering main navigation. This pattern displays a navigation menu with drill-down rows. Clickable rows sit in a bordered box. Each row uses the icon with name="chevron-right" to indicate navigation.

Preview

<s-section heading="Preferences">

<s-box border="base" borderRadius="base">

<s-clickable

padding="small-100"

href="#"

accessibilityLabel="Manage customer support settings and help resources"

<s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">

<s-box>

<s-heading>Customer support</s-heading>

<s-paragraph color="subdued">

Support settings, help resources, and customer service tools.

</s-paragraph>

</s-box>

<s-icon type="chevron-right" />

</s-grid>

</s-clickable>

<s-box paddingInline="small-100">

<s-divider />

</s-box>

<s-clickable

padding="small-100"

href="#"

accessibilityLabel="Configure product defaults, customer experience, and catalog settings"

<s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">

<s-box>

<s-heading>Products & catalog</s-heading>

<s-paragraph color="subdued">

Product defaults, customer experience, and catalog display options.

</s-paragraph>

</s-box>

<s-icon type="chevron-right" />

</s-grid>

</s-clickable>

<s-box paddingInline="small-100">

<s-divider />

</s-box>

<s-clickable

padding="small-100"

href="#"

accessibilityLabel="Configure shipping methods, rates, and fulfillment options"

<s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">

<s-box>

<s-heading>Shipping & fulfillment</s-heading>

<s-paragraph color="subdued">

Shipping methods, rates, zones, and fulfillment preferences.

</s-paragraph>

</s-box>

<s-icon type="chevron-right" />

</s-grid>

</s-clickable>

</s-box>

</s-section>

<s-section heading="Preferences">

<s-box

border="base"

borderRadius="base"

<s-clickable

padding="small-100"

href="#"

accessibilityLabel="Manage customer support settings and help resources"

<s-grid

gridTemplateColumns="1fr auto"

alignItems="center"

gap="base"

<s-box>

<s-heading>Customer support</s-heading>

<s-paragraph color="subdued">

Support settings, help resources, and customer service

tools.

</s-paragraph>

</s-box>

<s-icon type="chevron-right"></s-icon>

</s-grid>

</s-clickable>

<s-box paddingInline="small-100">

<s-divider></s-divider>

</s-box>

<s-clickable

padding="small-100"

href="#"

accessibilityLabel="Configure product defaults, customer experience, and catalog settings"

<s-grid

gridTemplateColumns="1fr auto"

alignItems="center"

gap="base"

<s-box>

<s-heading>Products & catalog</s-heading>

<s-paragraph color="subdued">

Product defaults, customer experience, and catalog display

options.

</s-paragraph>

</s-box>

<s-icon type="chevron-right"></s-icon>

</s-grid>

</s-clickable>

<s-box paddingInline="small-100">

<s-divider></s-divider>

</s-box>

<s-clickable

padding="small-100"

href="#"

accessibilityLabel="Configure shipping methods, rates, and fulfillment options"

<s-grid

gridTemplateColumns="1fr auto"

alignItems="center"

gap="base"

<s-box>

<s-heading>Shipping & fulfillment</s-heading>

<s-paragraph color="subdued">

Shipping methods, rates, zones, and fulfillment preferences.

</s-paragraph>

</s-box>

<s-icon type="chevron-right"></s-icon>

</s-grid>

</s-clickable>

</s-box>

</s-section>

jsx

<s-section heading="Preferences">
  <s-box border="base" borderRadius="base">
    <s-clickable
      padding="small-100"
      href="#"
      accessibilityLabel="Manage customer support settings and help resources"
    >
      <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
        <s-box>
          <s-heading>Customer support</s-heading>
          <s-paragraph color="subdued">
            Support settings, help resources, and customer service tools.
          </s-paragraph>
        </s-box>
        <s-icon type="chevron-right" />
      </s-grid>
    </s-clickable>
    <s-box paddingInline="small-100">
      <s-divider />
    </s-box>
    <s-clickable
      padding="small-100"
      href="#"
      accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
    >
      <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
        <s-box>
          <s-heading>Products & catalog</s-heading>
          <s-paragraph color="subdued">
            Product defaults, customer experience, and catalog display options.
          </s-paragraph>
        </s-box>
        <s-icon type="chevron-right" />
      </s-grid>
    </s-clickable>
    <s-box paddingInline="small-100">
      <s-divider />
    </s-box>
    <s-clickable
      padding="small-100"
      href="#"
      accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
    >
      <s-grid gridTemplateColumns="1fr auto" alignItems="center" gap="base">
        <s-box>
          <s-heading>Shipping & fulfillment</s-heading>
          <s-paragraph color="subdued">
            Shipping methods, rates, zones, and fulfillment preferences.
          </s-paragraph>
        </s-box>
        <s-icon type="chevron-right" />
      </s-grid>
    </s-clickable>
  </s-box>
</s-section>

html

<s-section heading="Preferences">
  <s-box
    border="base"
    borderRadius="base"
  >
    <s-clickable
      padding="small-100"
      href="#"
      accessibilityLabel="Manage customer support settings and help resources"
    >
      <s-grid
        gridTemplateColumns="1fr auto"
        alignItems="center"
        gap="base"
      >
        <s-box>
          <s-heading>Customer support</s-heading>
          <s-paragraph color="subdued">
            Support settings, help resources, and customer service
            tools.
          </s-paragraph>
        </s-box>
        <s-icon type="chevron-right"></s-icon>
      </s-grid>
    </s-clickable>
    <s-box paddingInline="small-100">
      <s-divider></s-divider>
    </s-box>
    <s-clickable
      padding="small-100"
      href="#"
      accessibilityLabel="Configure product defaults, customer experience, and catalog settings"
    >
      <s-grid
        gridTemplateColumns="1fr auto"
        alignItems="center"
        gap="base"
      >
        <s-box>
          <s-heading>Products & catalog</s-heading>
          <s-paragraph color="subdued">
            Product defaults, customer experience, and catalog display
            options.
          </s-paragraph>
        </s-box>
        <s-icon type="chevron-right"></s-icon>
      </s-grid>
    </s-clickable>
    <s-box paddingInline="small-100">
      <s-divider></s-divider>
    </s-box>
    <s-clickable
      padding="small-100"
      href="#"
      accessibilityLabel="Configure shipping methods, rates, and fulfillment options"
    >
      <s-grid
        gridTemplateColumns="1fr auto"
        alignItems="center"
        gap="base"
      >
        <s-box>
          <s-heading>Shipping & fulfillment</s-heading>
          <s-paragraph color="subdued">
            Shipping methods, rates, zones, and fulfillment preferences.
          </s-paragraph>
        </s-box>
        <s-icon type="chevron-right"></s-icon>
      </s-grid>
    </s-clickable>
  </s-box>
</s-section>

Was this page helpful?