Interstitial nav
Interstitial navigation is used to connect merchants to deeper pages—such as settings, features, or resources—within a section of your app. It helps keep navigation clean and focused by avoiding multiple nested items, making it easier for merchants to discover and access important functionality.
| Used to | Examples |
|---|---|
| Link to individual settings pages | Navigate from a settings overview to product settings or notification preferences |
| Connect to feature-specific pages | Direct merchants from campaign overview to reporting or automation setup |
| Guide merchants to supporting resources | Link to help documentation or integration guides from a central section |
| Simplify navigation structure | Reduce clutter by providing access to deeper pages without multi-level menus |
Was this section helpful?
Interstitial nav
<s-section heading="Preferences">
<s-box
border="base"
borderRadius="base"
>
<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 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="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>
</s-section>
Examples
Interstitial nav
Default
<s-section heading="Preferences"> <s-box border="base" borderRadius="base" > <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 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="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> </s-section>
