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 Use casesUse cases
- Linking to individual settings or configuration pages
- Connecting merchants to feature-specific sections
- Guiding to help documentation or integration resources
Anchor to ExamplesExamples
Merchants need clear paths to deeper pages (for example, settings and features) without cluttering main navigation. This pattern displays a navigation menu with drill-down rows. The section uses padding="none" and holds its clickable rows in a lightly padded box, so they fill the card without a second border and keep room for their focus rings. Inset dividers separate the rows. Each row uses the icon with type="chevron-right" to indicate navigation.
Preview
<s-section heading="Preferences" padding="none">
<s-box padding="small-400">
<s-clickable
padding="small-100"
borderRadius="base"
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"
borderRadius="base"
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"
borderRadius="base"
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" padding="none">
<s-box padding="small-400">
<s-clickable
padding="small-100"
borderRadius="base"
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"
borderRadius="base"
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"
borderRadius="base"
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" padding="none">
<s-box padding="small-400">
<s-clickable
padding="small-100"
borderRadius="base"
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"
borderRadius="base"
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"
borderRadius="base"
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" padding="none">
<s-box padding="small-400">
<s-clickable
padding="small-100"
borderRadius="base"
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"
borderRadius="base"
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"
borderRadius="base"
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?